HaNdTriX’s gists

HaNdTriX / apollo.logLink.js

Last active April 15, 2020 08:26

Simple logging middleware for Apollo Client.

	import { ApolloLink } from 'apollo-link';

	const logLink = new ApolloLink((operation, forward) => {
	console.time(operation.operationName);
	return forward(operation).map(result => {
	console.timeEnd(operation.operationName);
	return result;
	});
	});

HaNdTriX / useFont.js

Last active June 3, 2024 22:07

Concepts of simple font loader using react suspense.

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

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

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 / 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 / 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 / UseRouterExample.next.js

Last active June 10, 2020 02:20

Next.js useRouter

	// 🤫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 / 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 / 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 / hooks-useForceUpdate.js

Last active April 12, 2020 13:17

Force update hook for react.js

	import { useState } from 'react'

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

	export default useForceUpdate

Henrik Wenz HaNdTriX