Igor Snitkin snigo

🖥️

Coding...

From design system to system design and everything in between

snigo / useRefresh.tsx

Last active February 27, 2024 17:56

	/** hooks/useRefresh.ts */
	const useRefresh = () => {
	const [, dispatch] = useReducer((bool) => !bool, true);
	return dispatch;
	};

	/** hooks/useInit.ts */
	const useInit = (fn: () => any) => {
	const initialized = useRef(false);
	if (!initialized.current) {

snigo / promise_once.tsx

Last active February 27, 2024 16:55

	function getRandom() {
	return fetch("https://api.quotable.io/random").then((response) => {
	if (!response.ok) {
	throw new Error("Failed to fetch quote");
	}
	return response.json();
	});
	}

	let initialized = false;

snigo / qotd_001.tsx

Last active February 22, 2024 22:20

Quote of the Day v1.0.0

	function QuoteOfTheDay() {
	const [quote, setQuote] = useState("");
	const [isLoading, setIsLoading] = useState(true);
	const [error, setError] = useState(null);

	useEffect(() => {
	fetch("https://api.quotable.io/random")
	.then((response) => {
	if (!response.ok) {
	throw new Error("Failed to fetch quote");

snigo / solid_react-008-ChildrenNarrowExample.tsx

Created October 6, 2023 09:13

SOLID React article, code snippet 8: Children narrow prop in React

	interface ANarrowProps {
	children: string;
	}

	interface BNarrowProps {
	childNodes: string;
	}

	export const ANarrow = ({ children }: ANarrowProps) => {
	return <section>{children}</section>;

snigo / solid_react-007-ChildrenExample.tsx

Last active October 6, 2023 08:52

SOLID React article, code snippet 7: Children prop in React

	interface AProps extends React.PropsWithChildren {}

	interface BProps {
	childNodes?: React.ReactNode \| undefined;
	}

	export const A = ({ children }: AProps) => {
	return <section>{children}</section>;
	};

snigo / solid_react-006-ButtonV3.tsx

Created October 6, 2023 08:09

SOLID React article, code snippet 6: Button component with variant

	interface ButtonProps
	extends React.PropsWithChildren,
	React.HTMLAttributes<HTMLButtonElement> {
	variant?: 'solid' \| 'outlined' \| 'blank';
	onClick: React.MouseEventHandler<HTMLButtonElement>;
	}

	export const Button: React.FunctionComponent<ButtonProps> = ({
	children,
	variant = 'blank',

snigo / solid_react-005-UserAvatarGood.tsx

Last active October 5, 2023 22:26

SOLID React article, code snippet 5: UserAvatar component fix

	import Image, { type ImageProps } from 'next/image';

	interface AvatarProps extends ImageProps {
	imageUrl: string;
	altText: string;
	}

	export const Avatar: React.FunctionComponent<AvatarProps> = ({
	imageUrl,
	altText,

snigo / solid_react-004-UserAvatarBad.tsx

Created October 5, 2023 21:52

SOLID React article, code snippet 4: UserAvatar component - BAD

	import Image, { type ImageProps } from 'next/image';

	import { type User } from './types';

	interface UserAvatarProps extends ImageProps {
	user: User;
	}

	export const UserAvatar: React.FunctionComponent<UserAvatarProps> = ({
	user,

snigo / solid_react-003-IconButton.tsx

Created October 5, 2023 15:08

SOLID React article, code snippet 3: Button sub component

	import { Button, ButtonProps } from './Button';

	interface IconButtonProps extends Omit<ButtonProps, 'icon'> {
	iconStart?: React.ReactNode;
	iconEnd?: React.ReactNode;
	}

	export const IconButton: React.FunctionComponent<IconButtonProps> = ({
	children,
	iconStart,

snigo / solid_react-002-ButtonV2.tsx

Last active October 5, 2023 14:46

SOLID React article, code snippet 2: Button component with iconStart and iconEnd

	interface ButtonProps
	extends React.PropsWithChildren,
	React.HTMLAttributes<HTMLButtonElement> {
	/**
	* @deprecated Use `iconStart` instead
	*/
	icon?: React.ReactNode;
	iconStart?: React.ReactNode;
	iconEnd?: React.ReactNode;
	}