Skip to content

Instantly share code, notes, and snippets.

View gabemeola's full-sized avatar
🐛

Gabe gabemeola

🐛
View GitHub Profile
@gabemeola
gabemeola / useRefDimensions.ts
Created February 18, 2022 01:22
Get dimensions of a HTML Element in React
import { useState, useCallback, useLayoutEffect, RefObject, useMemo } from 'react';
import debounce from 'debounce';
export type Dimensions = [number, number];
export default function useRefDimensions(ref: RefObject<HTMLElement>): Dimensions {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const computeDimensions = useCallback((elem: Element) => {
@gabemeola
gabemeola / promiseChain.ts
Last active September 4, 2020 17:27
Allows all promises to be awaited while capturing values
function noop() {}
type CatchCallback<T> = Parameters<Promise<T>['catch']>[0];
class PromiseChain<T> {
#chain: Promise<any> = Promise.resolve();
#values: Array<T> = [];
add(promise: Promise<T | void | undefined>, promiseCatch: CatchCallback<T> = noop) {
this.#chain = this.#chain
.then(() => promise)
@gabemeola
gabemeola / requestOnIdle.js
Created November 14, 2019 17:03
requestOnIdle.js
const isRequestIdleCallbackSupported =
'requestIdleCallback' in window &&
typeof window.requestIdleCallback === 'function';
/**
* A higher order function that wraps passed function to run
* inside of a requestIdleCallback or "onload" event
* depending on what is supported in the browser.
*
* This is useful for running low priority app level bootstrapping events.
@gabemeola
gabemeola / simpleDateToIso.ts
Created June 25, 2019 18:52
Converts Java SimpleDataFormat to ISO 8601 format
/**
* Converts Java SimpleDataFormat to ISO 8601 format
*
* @example
* simpleDateIso('2019-01-24T12:42:17:234-0700') => '2019-01-24T12:42:17.234-0700'
*
* @param {string} simpleDate - Java SimpleDataFormat string
* https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html
* @returns {string|null}
*/
@gabemeola
gabemeola / pxToRem.ts
Created June 25, 2019 18:52
px to rem
/**
* Returns rem representation of pixel based on root size.
*
* @param {number} px - Pixel Size
* @param {number} [rootSize=16] - Root Font Size
* @returns {string}
*/
export default function pxToRem(px: number, rootSize: number = 16): string {
return `${px / rootSize}rem`;
}
@gabemeola
gabemeola / useToggle.ts
Last active June 10, 2019 18:57
Simple Toggle Hook for React
import { useReducer } from 'react';
type Toggle = (forceToggle?: boolean) => void;
export default function useToggle(initial: boolean = false) {
return useReducer(
(toggledState: boolean, forceToggle?: boolean) => forceToggle || !toggledState,
initial
) as [boolean, Toggle];
}
@gabemeola
gabemeola / .yarnclean
Created May 14, 2019 16:28
A Good Yarn Clean
# test directories
__tests__
test
tests
powered-test
# asset directories
docs
doc
website
@gabemeola
gabemeola / useReducerMap.ts
Created May 1, 2019 16:32
useReducer with maps
import { useReducer } from 'react';
type Reducer<S = any> = (state: S, action: any) => S;
type Map = Record<string, Reducer>
export default function useReducerMap(map: Map, initialState: unknown) {
return useReducer((state, action) => {
const reducer = map[action.type];
return reducer(state, action);
}, initialState)
@gabemeola
gabemeola / useLongPress.ts
Created April 6, 2019 16:24
Use Long Press Effect
import React, { useEffect } from 'react';
export default function useLongPress(onLongPress: (ev: React.TouchEvent) => any, touchDuration: number = 500) {
let timer: NodeJS.Timeout;
const startTimer = (ev: React.TouchEvent) => {
// Re-assigning event so we can keep a ref if react cleans up
// (https://reactjs.org/docs/events.html#event-pooling)
const event = ev;
timer = setTimeout(() => onLongPress(event), touchDuration);
@gabemeola
gabemeola / omit.d.ts
Created February 1, 2019 21:39
Omits a key from a type
/**
* Omit a value from a type
*/
export type Omit<Type, Key extends keyof Type> = Pick<Type, Exclude<keyof Type, Key>>