🔥

Oli Booty olibooty

🔥

Full stack JS developer

olibooty / TabPanel.tsx

Created October 21, 2025 13:33

olibooty / useWindowSize.ts

Last active May 20, 2025 15:11

useWindowSize.ts

	import { useSyncExternalStore } from "react";

	function subscribe(onStoreChange: () => void) {
	console.log("called");
	window.addEventListener("resize", onStoreChange);
	return () => window.removeEventListener("resize", onStoreChange);
	}

	function getServerSnapshot() {
	return 0;

olibooty / useLocalStorage.test.ts

Last active June 17, 2024 08:09

	import { renderHook } from '@testing-library/react';
	import { act } from 'react-dom/test-utils';
	import { useLocalStorage } from './useLocalStorage';

	describe('useLocalStorage', () => {
	const key = 'test-key';
	const value = 'test-value';

	beforeEach(() => {
	jest.clearAllMocks();

olibooty / Requirer.ts

Created June 11, 2024 12:46

	/**
	* Renders supplied properties of an object required
	*/
	type Requirer <T, K extends keyof T> = T & { [P in K]-?: T[P] }

	interface Foo {
	opt?: string;
	}

	type ReqFoo = Requirer<Foo, 'opt'>

olibooty / branded-type.ts

Created June 11, 2024 12:42

	declare const __brand: unique symbol;

	type Branded<Type, Brand> = Type & {
	readonly [__brand]: Brand;
	};

	type RouteName = `/${string}`;
	type BrandedRouteName = Branded<RouteName, 'RouteName'>;

olibooty / filterByPropertyKey.ts

Created October 9, 2023 20:41

	export const filterByPropertyKey = <TObj extends Object,>(
	collection: Readonly<TObj[]>,
	filters: Record<string, unknown>,
	) => {
	if (Object.keys(filters).length === 0) {
	return collection;
	}

	return collection.filter((item) => {
	let include = true;

olibooty / allSettledCategorised.ts

Last active September 20, 2024 14:57

	interface PromiseRes <TObj>{
	fulfilled: TObj[];
	rejects: PromiseRejectedResult[];
	}

	/**
	* Given an array of promises it will wait for every item to be resolved or rejected
	* and returns the fulfilled and rejected objects in two separate arrays
	*/

olibooty / pick.ts

Created October 6, 2023 15:59

	/**
	*
	* Selects elements from target object by provided keys
	*/
	export const pick = <T extends object, K extends keyof T = keyof T>(
	object: T,
	keys: K[]
	): Pick<T, K> => {
	let output: any = {};

olibooty / groupBy.ts

Created October 6, 2023 15:58

	/**
	* Groups elements in an array by a given key (if that key exists within each
	* iteratee)
	*
	* *Optional: you can provide a getter function to access a value within each
	* item of the array*
	*/
	const groupBy = <T extends Record<string, any>, U = T[keyof T]>(
	key: keyof T,
	array: T[],

olibooty / prefers-reduced-motion.scss

Last active October 6, 2023 16:07

A simple way to handle reduced motion preferences with a few lines and one media query

	:root {
	--prefers-reduced-motion: 1;

	@media (prefers-reduced-motion) {
	--prefers-reduced-motion: 0;
	}
	}

	@function animationMs($speed) {
	@return calc(#{$speed} * var(--prefers-reduced-motion))ms;