Skip to content

Instantly share code, notes, and snippets.

Henrik Wenz HaNdTriX

Block or report user

Report or block HaNdTriX

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@HaNdTriX
HaNdTriX / useFont.js
Last active Jan 22, 2020
Concepts of simple font loader using react suspense.
View useFont.js
function wrapPromise(promise) {
let status = "pending";
let result;
let suspender = promise.then(
r => {
status = "success";
result = r;
},
e => {
status = "error";
View useElementResize.ts
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) {
@HaNdTriX
HaNdTriX / index.html
Last active Oct 26, 2019
Electron Fiddle Gist
View index.html
<!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>
View removeAllSWCaches.js
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) {
View head.js
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>
View UseRouterExample.next.js
// 🤫The following code is experimental and might break in the future!
// Don't use it if you are using some kind of side-effect patterns like: Helmet, GraphQL or react-side-effect.
import { useRouter } from 'next/router'
function Home() {
const {
// `String` of the actual path (including the query) shows in the browser
asPath,
// `String` Current route
@HaNdTriX
HaNdTriX / useCachedRefHandler.js
Last active Mar 10, 2019
React hook for reducing the amount of ref event bindings
View useCachedRefHandler.js
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 / hooks-useRouter.js
Last active Feb 6, 2019
React-Router hooks usage
View hooks-useRouter.js
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 / hooks-useForceUpdate.js
Last active Jan 29, 2019
Force update hook for react.js
View hooks-useForceUpdate.js
import { useState } from 'react'
const useForceUpdate = () => {
const [, setState] = useState()
return setState
}
export default useForceUpdate
View hooks-clickOutside.js
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)
You can’t perform that action at this time.