Skip to content

Instantly share code, notes, and snippets.


Henrik Wenz HaNdTriX

View GitHub Profile
HaNdTriX / StripeTextField.js
Last active Aug 26, 2020
Use Stripe and Material-UI
View StripeTextField.js
import React, { useImperativeHandle } from "react";
import PropTypes from "prop-types";
import TextField from "@material-ui/core/TextField";
import { fade, useTheme } from "@material-ui/core/styles";
function StripeInput(props) {
const {
component: Component,
/* eslint-disable no-unused-vars */
View asyncRetry.js
* Allows to repeatedly call
* an async code block
* @callback callback
* @callback [filterError] Allows to differentiate beween different type of errors
* @param {number} [maxRetries=Infinity]
function asyncRetry(
View pages-_error.js
import React from 'react'
function Error({ statusCode }) {
return (
<h2>This is the Next.js _error.js page</h2>
<p>Choose the status code by changing the url param above</p>
This page supports the 7.x.x status code range{' '}
HaNdTriX / apollo.logLink.js
Last active Apr 15, 2020
Simple logging middleware for Apollo Client.
View apollo.logLink.js
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 / index.html
Last active Oct 26, 2019
Electron Fiddle Gist
View index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Hello World!</title>
<button id='audioMutedTrue'>audioMuted true</button>
<button id='setAudioMutedTrue'>setAudioMuted true</button>
View removeAllSWCaches.js
self.addEventListener('activate', function(event) {
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}>
// 🤫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
// `String` Current route