Simple setup to get quick and fast going with the help of [Parcel][parcel].
- Create a package.json and paste the following in:
{
"name": "prototype",
import * as React from 'react'; | |
function useDebouncedValue<T>(value: T, timeout: number) { | |
const [debouncedValue, setDebouncedValue] = React.useState(value); | |
React.useEffect(() => { | |
const id = setTimeout(() => setDebouncedValue(value), timeout); | |
return () => clearTimeout(id); | |
}, [value, timeout]); |
import * as React from 'react'; | |
import useInlineMemo from './useInlineMemo'; | |
function App() { | |
const [value, setValue] = React.useState(""); | |
const memo = useInlineMemo(); | |
return ( | |
<input | |
type="text" |
function calculateFlipPositions(firstRect: ClientRect, lastRect: ClientRect) { | |
return { | |
x: firstRect.left - lastRect.left, | |
y: firstRect.top - lastRect.top, | |
w: firstRect.width / lastRect.width, | |
h: firstRect.height / lastRect.height, | |
}; | |
} | |
function triggerRepaint(element: HTMLElement) { |
import * as React from "react"; | |
import useBoundingRef from "./useBoundingRect"; | |
function App() { | |
const elementRef = React.useRef<HTMLDivElement | null>(null); | |
const bounds = useBoundingRef(elementRef); | |
return ( | |
<div ref={elementRef}> | |
Get my bounds! |
const { PassThrough } = require('stream'); | |
function combineStream(...streams) { | |
return streams.reduce((passthrough, stream, i) => { | |
stream.pipe(passthrough); | |
stream.once('end', () => { | |
streams.every(s => s.ended); | |
passthrough.emit('end'); | |
}); | |
return passthrough; |
function drawResizedImage( | |
context: CanvasRenderingContext2D, | |
imageElement: HTMLImageElement, | |
width: number = context.canvas.width, | |
height: number = context.canvas.height, | |
) { | |
// eventual image offset (0.5 is center) | |
const offsetX = 0.5; | |
const offsetY = 0.5; | |
// set image values; |
import { Dispatch } from 'redux'; | |
type StoreState = any; // preferable this should be the real Type of the store | |
/** Default action with just the type */ | |
interface Action<T extends string> { | |
readonly type: T; | |
} | |
/** Action extended with a payload that could be any value, used for the reducer */ |
// Create the controller that sends a signal if | |
// an abort is requested by the api | |
const abortController = new AbortController(); | |
// create a fetch, and pass the signal from the controller to | |
// the fetch options | |
const request = fetch('http://my-awesome-site.com/api/awesome', { | |
signal: abortController.signal, | |
}); |