Skip to content

Instantly share code, notes, and snippets.

View imp-dance's full-sized avatar
💻
Coding

Håkon Underbakke imp-dance

💻
Coding
8 followers · 16 following
View GitHub Profile
@imp-dance
imp-dance / NativeModal.tsx
Created May 10, 2023 23:05
Native React Modal
import React from "react";
export const Modal = (props: React.ComponentProps<"dialog">) => {
const ref = useRef();
useEffect(() => {
const dialog = ref.current;
dialog.showModal();
return () => dialog.close();
}, []);
@imp-dance
imp-dance / naive-redux.ts
Last active May 4, 2023 07:42
~100 line super-simple naive redux implementation
import React from "react";
import { deepCopy } from "./deep-copy";
import { gsid } from "./idgen";
/**
* Determines the _new state_, given `TAction`.
*
* ```ts
* const reducer = (state, action) => {
* if (action.type === "increment") return state + 1;
@imp-dance
imp-dance / useCodePreview.ts
Created April 21, 2022 17:08
A fine way to preview user-provided code in an iFrame
import React, { useState, useRef, useEffect } from "react";
import { transform } from "@babel/standalone";
import { TransformOptions } from "@babel/core";
import { useDebounce } from "use-debounce";
import { v4 } from "uuid";
type UseCodePreviewArgs = {
js: string | undefined;
html: string | undefined;
css: string | undefined;
@imp-dance
imp-dance / Pagination.jsx
Last active October 14, 2020 23:00
Reusable pagination hook & display-component that integrates easily with hook
import React, { useEffect, useState } from "react"
export function usePagination(
list = [{}],
options = { perPage: 10, onPageChange: () => {} }
) {
const [activePage, setActivePage] = useState(1)
const [pages, setPages] = useState([1])
const [filteredList, setFilteredList] = useState([{}])
const { perPage, onPageChange } = options;
@imp-dance
imp-dance / useMouseMove.ts
Last active September 15, 2020 10:33
import React, { useState } from "react";
const getTotalOffset = (el: HTMLElement) => {
let a: any = el,
x = 0,
y = 0;
while (a) {
x += a.offsetLeft;
y += a.offsetTop;
a = a.offsetParent;
@imp-dance
imp-dance / useAxios.js
Created November 7, 2019 10:43
useAxios React Hook
import { useState, useEffect } from "react";
import axios from "axios";
const useAxios = (url, dependencies) => {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState({});
useEffect(() => {
setData({});
const getData = async () => {
axios
.get(url)
@imp-dance
imp-dance / Cookies.js
Last active January 28, 2020 19:02
Super simple cookie manager
export default class Cookies {
get = name => {
let result = document.cookie.match(
"(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)"
);
return result ? result.pop() : undefined;
};
set = (name, value, expire) => {
let cookieString;
if (name === undefined || value === undefined) {
@imp-dance
imp-dance / ReactBeforeUnload.js
Last active October 23, 2019 13:36
Beforeunload on React component
import React from "react";
export default class WrapperWithBeforeunload extends React.Component{
componentDidMount(){
// Add event listener on component mount
window.addEventListener("beforeunload", this.beforeUnloadHandler);
}
componentWillUnmount(){
// Remove event listener on component unmount
window.removeEventListener("beforeunload", this.beforeUnloadHandler);
}
@imp-dance
imp-dance / index.html
Last active February 8, 2019 10:55
LightAF portfolio design. https://impedans.me
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css" />
<title>dev-name</title> <!-- title/name -->
</head>
<body>
<div class="container">
<h1>dev-name</h1> <!-- title/name -->