Henrik Wenz HaNdTriX

## useFont.js
function wrapPromise(promise) {
  let status = "pending";
  let result;
  let suspender = promise.then(
    r => {
      status = "success";
      result = r;
    },
    e => {
      status = "error";

## 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) {

## 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>

## 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) {

## 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>

## 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

## 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
 */

## 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

## hooks-useForceUpdate.js
import { useState } from 'react'

const useForceUpdate = () => {
  const [, setState] = useState()
  return setState
}

export default useForceUpdate

## 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)