Skip to content

Instantly share code, notes, and snippets.

Avatar
🐛

DominicTobias

🐛
View GitHub Profile
@DominicTobias
DominicTobias / useResizeObserver.ts
Created Mar 18, 2022
Resize observer hook for react
View useResizeObserver.ts
import { useEffect, useRef, useState } from 'react'
export function useResizeObserver<E extends Element>() {
const ref = useRef<E>(null)
const [width, setWidth] = useState(0)
const [height, setHeight] = useState(0)
useEffect(() => {
if (!ref.current) {
return () => {}
@DominicTobias
DominicTobias / useThrottledState.ts
Created Mar 17, 2022
A react hook for throttled state that doesn't suck
View useThrottledState.ts
import { useState, useRef, useEffect, useCallback } from 'react'
export type StateSetter<S> = (intermediateState: S) => S
// For optimal performance mutate state in setIntermediateState
// and pass a custom `makeNewState` for when the final state is
// updated. e.g. `obj => {...obj}` or `arr => [...arr]`
export function useThrottledState<S>(
initialState: S | (() => S),
timeout = 300,
@DominicTobias
DominicTobias / fastifySchemaExample.ts
Last active Feb 1, 2022
Fastify JSON Schema example
View fastifySchemaExample.ts
fastify.get<{ Querystring: { address: string } }>(
'/checkAddress',
{
schema: {
querystring: {
type: 'object',
properties: {
postcode: { type: 'string' },
},
required: ['postcode'],
@DominicTobias
DominicTobias / server.ts
Last active Dec 24, 2021
Fastify NodeJS server example
View server.ts
import Fastify from 'fastify'
import middie from 'middie'
import cors from 'cors'
import frameguard from 'frameguard'
import xXssProtection from 'x-xss-protection'
const fastify = Fastify({
logger: true,
})
View binarySearch.ts
function binarySearch<T = any>(
findValue: number,
items: T[],
getValue: (item: T) => number
) {
let lo = 0
let hi = items.length - 1
while (lo <= hi) {
const mi = (lo + hi) >>> 1
@DominicTobias
DominicTobias / package.json
Created Jul 18, 2021
A component/library config for rollup
View package.json
{
"main": "dist/index.cjs.js",
"module": "dist/index.js",
"exports": {
".": {
"import": "./dist/index.js",
"require": "./dist/index.cjs.js"
}
},
"types": "dist/index.d.ts",
@DominicTobias
DominicTobias / useSizeObserver.ts
Last active Aug 4, 2021
React useSizeObserver
View useSizeObserver.ts
import { useEffect, useRef } from 'react'
export function useSizeObserver(
elRef: React.RefObject<HTMLElement | null>,
onChange: (width: number, height: number) => void,
shouldObserve = true
) {
const onChangeRef = useRef(onChange)
onChangeRef.current = onChange
View math.test.ts
import { round, floor, ceil, roundToTick, floorToTick, ceilToTick } from './math'
describe('math', () => {
it('round works up to 8 decimals and 999 million', () => {
expect(round(123.123456789, 0)).toEqual(123)
expect(round(123.123456789, 1)).toEqual(123.1)
expect(round(123.123456789, 2)).toEqual(123.12)
expect(round(123.123456789, 3)).toEqual(123.123)
expect(round(123.123456789, 4)).toEqual(123.1235)
expect(round(123.123456789, 5)).toEqual(123.12346)
@DominicTobias
DominicTobias / DecayAnimation.ts
Created Aug 8, 2020
DecayAnimation for scrolling
View DecayAnimation.ts
type UpdateCb = (x: number, y: number) => void;
export interface DecayAnimationProps {
deceleration?: number;
onUpdate: UpdateCb;
}
export class DecayAnimation {
deceleration: number;
_onUpdate: UpdateCb;
@DominicTobias
DominicTobias / useScrollPos.ts
Created Mar 12, 2020
useScrollPos - React hook for scroll position
View useScrollPos.ts
import { RefObject, useEffect, useState } from 'react';
export interface ScrollPos {
top: number;
left: number;
}
export function useScrollPos(elRef: RefObject<HTMLElement>, disabled?: boolean): ScrollPos {
const [scrollPos, setScrollPos] = useState({ top: 0, left: 0 });