smashingpat

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]);

smashingpat

Javascript/Typescript starter kit

Simple setup to get quick and fast going with the help of [Parcel][parcel].

Setup

1. Create a package.json and paste the following in:

{
"name": "prototype",

smashingpat

import * as React from 'react';
import useInlineMemo from './useInlineMemo';

function App() {
  const [value, setValue] = React.useState("");
  const memo = useInlineMemo();

  return (
    <input
      type="text"

smashingpat

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

smashingpat

Usage

header {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1em 1em 0; /* fallback when css-variables are not supported */
  padding-top: calc(var(--safe-area-inset-top) + 1em);
 padding-left: calc(var(--safe-area-inset-left) + 1em);

smashingpat

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!

smashingpat

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;

smashingpat

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;

smashingpat

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

smashingpat

// 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,
});