codemile’s gists

codemile / createStateProvider.tsx

Created January 2, 2025 16:46

Reusable TypeScript/React utility for creating state management providers with useContext. Includes a createStateProvider function that simplifies creating scoped context providers with state management capabilities.

	import {
	createContext,
	type FC,
	type PropsWithChildren,
	useCallback,
	useContext,
	useMemo,
	useState as useReactState
	} from 'react';

codemile / combineProviders.tsx

Created January 2, 2025 16:44

Combines multiple providers into a single provider.

	import type {FC, PropsWithChildren} from 'react';

	export const combineProviders = (
	...providers: Array<FC<PropsWithChildren>>
	): FC<PropsWithChildren> => {
	return providers.reduce<FC<PropsWithChildren>>(
	(AccumulatedProviders, CurrentProvider) => {
	const Component: FC<PropsWithChildren> = ({children}) => (
	<AccumulatedProviders>
	<CurrentProvider>{children}</CurrentProvider>

codemile / ScaffoldEmotionCachProvider.tsx

Created August 20, 2023 14:05

Emotion provider for MUI that works in layout.tsx files of the app directory in NextJs 13

	'use client';

	import createCache from '@emotion/cache';
	import {CacheProvider, EmotionCache} from '@emotion/react';
	import {
	SerializedStyles,
	StyleSheet
	} from '@emotion/utils/dist/declarations/types';
	import {useServerInsertedHTML} from 'next/navigation';
	import {FC, PropsWithChildren, useCallback, useMemo} from 'react';

codemile / useBounceValue.tsx

Created July 17, 2022 16:21

React hook for bouncing a value back to it's default after a delay.

	import {useEffect, useState} from 'react';

	export const useBounceValue = <TValue,>(
	newValue: TValue,
	defaultValue: TValue,
	delay: number
	) => {
	const [value, setValue] = useState<TValue>(defaultValue);

	useEffect(() => {

codemile / g7_currencies.json

Created June 8, 2022 21:04

A list of the G7 currencies.

	{
	"AED": "United Arab Emirates Dirham",
	"AFN": "Afghan Afghani",
	"ALL": "Albanian Lek",
	"AMD": "Armenian Dram",
	"ANG": "Netherlands Antillean Guilder",
	"AOA": "Angolan Kwanza",
	"ARS": "Argentine Peso",
	"AUD": "Australian Dollar",
	"AWG": "Aruban Florin",

codemile / useResizeObserver.tsx

Created September 29, 2021 12:07

Hook that listens for bounding box changes on a DOM element.

	import {MutableRefObject, useEffect, useState} from 'react';

	const toRect = (rect: DOMRect \| undefined) => {
	const width = rect?.width \|\| 0,
	height = rect?.height \|\| 0,
	x = rect?.x \|\| 0,
	y = rect?.y \|\| 0;
	return {width, height, x, y};
	};

codemile / useToggle.tsx

Last active December 30, 2021 20:04

Hook that toggles a boolean state.

	import {useCallback, useState} from 'react';

	const useToggle = (init: boolean = false): [boolean, (v: unknown) => void] => {
	const [toggle, setToggle] = useState(init);
	const callback = useCallback((value) => {
	setToggle((prev) => (typeof value === 'boolean' ? value : !prev));
	}, []);
	return [toggle, callback];
	};

codemile / usePrevious.tsx

Created August 24, 2021 11:11

Hook that returns the previous value.

	import {useEffect, useRef} from 'react';

	export function usePrevious(value) {
	const ref = useRef(value);

	useEffect(() => {
	ref.current = value;
	}, [value]);

	return ref.current;

codemile / useGotQuote.tsx

Created August 13, 2021 15:15

Hook that fetches a random Games Of Thrones quote.

	import {useEffect, useState} from 'react';

	const useGotQuote = () => {
	const [quote, setQuote] = useState('');
	useEffect(() => {
	fetch('https://game-of-thrones-quotes.herokuapp.com/v1/random')
	.then((response) => response.json())
	.then((data) => setQuote(data?.sentence));
	}, []);
	return quote;

codemile / useCurrency.tsx

Last active December 30, 2021 20:10

Hook that formats a number as a currency using the browser's locale.

	import {useMemo } from 'react';

	const CODE: Record<string, string> = {
	IN: 'INR',
	SE: 'SEK',
	GB: 'GBP',
	IE: 'EUR',
	CN: 'CNY',
	JP: 'JPY',
	US: 'USD',

	import {MutableRefObject, useEffect, useState} from 'react';

	const toRect = (rect: DOMRect \| undefined) => {
	const width = rect?.width \|\| 0,
	height = rect?.height \|\| 0,
	x = rect?.x \|\| 0,
	y = rect?.y \|\| 0;
	return {width, height, x, y};
	};

Nick Foscarini codemile