Chris D'Ascoli cdaz5

Staff Software Engineer @ fountain

cdaz5 / app.tsx

Created August 12, 2022 14:42

Explicitly pass a generic to a React component

	const OPTIONS = [
	{ value: 'rcube', label: 'Rubix Cube' },
	{ value: 'headphones', label: 'Bose Headphones' },
	{ value: 'mic', label: 'Mic' },
	] as const;

	const App = () => (
	<Dropdown<typeof OPTIONS[number]> // generic explicitly passed
	options={OPTIONS}
	onSelection={(opt) => {

cdaz5 / dropdown.tsx

Created August 12, 2022 13:52

TypeScript generic example using extends

cdaz5 / dropdown.tsx

Created August 11, 2022 20:55

basic signature of a TypeScript component that accepts a generic

cdaz5 / ctx - performance optimizations example

Last active May 14, 2022 19:50

	import React from 'react';

	const SpicyStateCtx = React.createContext(null);
	const SpicyApiCtx = React.createContext(null);

	// custom provider
	const SpicyProvider = ({ children }) => {
	const [spice, setSpice] = React.useState("pepper");

	const api = React.useMemo(

cdaz5 / ctx - custom provider example

Last active May 14, 2022 19:50

	import React from 'react';

	const SpicyCtx = React.createContext(null);

	// custom provider
	export const SpicyProvider = ({ children }) => {
	const [spice, setSpice] = React.useState("scary");

	const api = {
	gingerSpice: () => setSpice("ginger"),

cdaz5 / gist:672f7e1d5b8356f21a014e0af94c9456

Last active May 14, 2022 19:50

ctx - custom hook example

	import React from 'react';

	const SpicyCtx = React.createContext(null);

	// custom hook
	export const useSpicyState = () => {
	const ctx = React.useContext(SpicyCtx);

	if (!ctx) {
	throw new Error("useSpicyState must be used within the SpicyProvider")

cdaz5 / gist:040092a2b0adebd920acf92bab0637d5

Last active October 3, 2020 15:13

	const withEntitySearch = <P,>(Component: ComponentType<P>) => (props: P) => {
	const [target, setTarget] = useState<Range \| null \| undefined>(null);
	const [index, setIndex] = useState(0);
	const [searchState, setSearch] = useState<SearchState>(({
	searchTerm: '',
	searchType: null,
	} as unknown) as SearchState);
	const optionsMenuRef = useRef<HTMLDivElement \| null>(null);

	// this is just a custom hook that calls an api

cdaz5 / gist:76e8fb18f6824a5f11ec015949286591

Created April 30, 2020 21:11

cdaz5 / gist:042e3d222fb5e630fe3cf756fcf7e505

Created October 7, 2019 15:01

Column Reordering in a Table w/ Hooks

	const { columns, data } = generateData(5);

	const App = () => {
	const [cols, setCols] = useState(columns);
	const [rows, setRows] = useState(data);
	const [dragOver, setDragOver] = useState("");

	const handleDragStart = e => {
	const { id } = e.target;
	const idx = cols.indexOf(id);

cdaz5 / gist:b146c7d9c4508a056031ee3da7ffb853

Created August 29, 2019 20:41

	type Option = { value: string; label: string };

	interface DropdownProps<TOption> {
	options: ReadonlyArray<TOption>;
	onSelection: (option: TOption) => void;
	}

	function Dropdown<TOption extends Option> ({ options, onSelection }: DropdownProps<TOption>) {

	return (

	interface DropdownProps<TOption> {
	options: ReadonlyArray<TOption>;
	onSelection: (option: TOption) => void;
	}

	function Dropdown<TOption> ({ options, onSelection }: DropdownProps<TOption>) {

	return (
	// implementation skipped for article clarity
	)