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, | |
| inputRef, | |
| /* 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( | |
| callback, |
HaNdTriX
/ pages-_error.js
Created Apr 30, 2020
View pages-_error.js
| import React from 'react' | |
| function Error({ statusCode }) { | |
| return ( | |
| <> | |
| <h1>{statusCode}</h1> | |
| <h2>This is the Next.js _error.js page</h2> | |
| <p>Choose the status code by changing the url param above</p> | |
| <p> | |
| This page supports the 7.x.x status code range{' '} |
View apollo.logLink.js
| 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; | |
| }); | |
| }); |
View useFont.js
| function wrapPromise(promise) { | |
| let status = "pending"; | |
| let result; | |
| let suspender = promise.then( | |
| r => { | |
| status = "success"; | |
| result = r; | |
| }, | |
| e => { | |
| status = "error"; |
HaNdTriX
/ useElementResize.ts
Created Nov 26, 2019
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) { |
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> |
HaNdTriX
/ removeAllSWCaches.js
Created Sep 24, 2019
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 |
NewerOlder