Skip to content

Instantly share code, notes, and snippets.

View HaNdTriX's full-sized avatar

Henrik Wenz HaNdTriX

152 followers · 135 following
View GitHub Profile
@HaNdTriX
HaNdTriX / NextHistoryContext.jsx
Created July 10, 2018 13:35
import React from 'react'
import Router from 'next/router'
const HistoryContext = React.createContext([]);
export class HistoryProvider extends React.Component {
state = {
history: []
}
@HaNdTriX
HaNdTriX / imgURLToDataURL.es6
Last active October 31, 2018 20:06
Convert an imageURL to a base64 dataURL via canvas
/**
* Convert an imageURL to a
* base64 dataURL via canvas
*
* @param {String} url
* @param {Object} options
* @param {String} options.outputFormat [outputFormat='image/png']
* @param {Float} options.quality [quality=1.0]
* @return {Promise}
* @docs https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement#Methods
@HaNdTriX
HaNdTriX / react-subscribe.js
Last active January 3, 2019 15:54
import React from 'react'
class App extends Component {
componentDidMount() {
// Subscribe here
}
componentWillUnmount() {
// Unsubscribe here
}
@HaNdTriX
HaNdTriX / hooks-clickOutside.js
Last active January 29, 2019 11:44
import { useEffect } from 'react'
function useClickOutside(ref, onClickOutside) {
useEffect(() => {
const handleClick = (event) => {
if (!ref.current || !ref.current.contains(event.target)) {
onClickOutside(event)
}
}
window.addEventListener('click', handleClick)
@HaNdTriX
HaNdTriX / hooks-useRouter.js
Last active February 6, 2019 11:48
React-Router hooks usage
import { useContext } from 'react'
import { __RouterContext as RouterContext, matchPath } from 'react-router-dom'
export default function useRouter (options = {}) {
const context = useContext(RouterContext)
const location = options.location || context.location
const match = options.path
? matchPath(location.pathname, options)
: context.match
@HaNdTriX
HaNdTriX / useCachedRefHandler.js
Last active March 10, 2019 10:42
React hook for reducing the amount of ref event bindings
import { useRef, useEffect } from 'react'
/**
* This hook reduces the amount of rebindings.
* Use it when your props change a lot.
*
* @param {DomRef} targetRef The reference to the dom node
* @param {String} eventName The eventName you want to bind
* @param {Function} handler The actual event handler
*/
@HaNdTriX
HaNdTriX / head.js
Last active September 20, 2019 15:37
import React from 'react'
import ReactDOM from 'react-dom'
const isServer = typeof window === 'undefined'
const Context = React.createContext([])
export const HeadProvider = ({ head, children }) => (
<Context.Provider value={head}>
{children}
</Context.Provider>
@HaNdTriX
HaNdTriX / removeAllSWCaches.js
Created September 24, 2019 08:58
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
// Return true if you want to remove this cache,
// but remember that caches are shared across
// the whole origin
return true
}).map(function(cacheName) {
@HaNdTriX
HaNdTriX / index.html
Last active October 26, 2019 05:21
Electron Fiddle Gist
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<button id='audioMutedTrue'>audioMuted true</button>
<button id='setAudioMutedTrue'>setAudioMuted true</button>
@HaNdTriX
HaNdTriX / useElementResize.ts
Created November 26, 2019 10:36
import { useState, useEffect, RefObject } from "react";
import ResizeObserver from "resize-observer-polyfill";
const useElementResize = (ref: RefObject<HTMLElement>) => {
const [rect, setRect] = useState({});
useEffect(() => {
if (!ref.current) return
const ro = new ResizeObserver((entries, observer) => {
for (const entry of entries) {