codesnips

hooks

typescript 
import { useEffect, useState } from "react";

export function useDebouncedValue<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState<T>(value);

  useEffect(() => {

Debounced Search Box With AbortController to Cancel Stale Fetches in React

react hooks debounce
by codesnips 3 tabs
javascript 
import { useLayoutEffect, useRef, useCallback } from 'react';

export function useScrollAnchor(anchorItemCount) {
  const containerRef = useRef(null);
  const savedRef = useRef(null);

Preserve Scroll Position When Loading Older Comments With useLayoutEffect

react hooks uselayouteffect
by codesnips 3 tabs
typescript 
import { RefObject, useEffect, useRef } from "react";

type Handler = (event: MouseEvent | TouchEvent) => void;

export function useClickOutside<T extends HTMLElement>(
  ref: RefObject<T>,

Reusable useClickOutside Hook for Closing Dropdowns in React

react hooks typescript
by codesnips 3 tabs
typescript 
import { useEffect, useState } from 'react';

interface FetchState<T> {
  data: T | null;
  error: Error | null;
  loading: boolean;

Cancel Stale Autocomplete Requests with AbortController in a useFetch Hook

react hooks abortcontroller
by codesnips 3 tabs
javascript 
import { useEffect, useRef } from 'react';

const TABBABLE = [
  'a[href]',
  'button:not([disabled])',
  'textarea:not([disabled])',

Accessible React Modal with Portal, Focus Trap, and Escape-to-Close Hook

react accessibility modal
by codesnips 3 tabs
typescript 
export interface QueryCodec<T> {
  parse: (raw: string | null) => T;
  serialize: (value: T) => string | null;
}

export function stringParam(fallback = ""): QueryCodec<string> {

Sync Typed Form State to the URL Query String with a useQueryState Hook

react hooks url-state
by codesnips 3 tabs
typescript 
import { useEffect, useState } from "react";

export function useDebouncedValue<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState<T>(value);

  useEffect(() => {

Build a Debounced Search Box in React with a Reusable useDebouncedValue Hook

react hooks typescript
by codesnips 3 tabs
typescript 
export const TOTAL_STEPS = 3;

export interface WizardData {
  email: string;
  password: string;
  fullName: string;

Typed Multi-Step Wizard Form With a useReducer State Machine in React

react typescript usereducer
by codesnips 4 tabs
typescript 
import { createContext } from 'react';

export type ToastVariant = 'success' | 'error' | 'info';

export interface Toast {
  id: number;

Imperative Toast Notification System with React Context and Auto-Dismiss

react toast context
by codesnips 4 tabs
typescript 
import { useEffect, useState } from 'react';

export function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T) => void] {

Persisting a Dark-Mode Theme Toggle with a React ThemeProvider and localStorage

react context hooks
by codesnips 4 tabs
javascript 
import { useCallback, useMemo, useState } from 'react';

function compare(a, b) {
  if (typeof a === 'number' && typeof b === 'number') return a - b;
  return String(a ?? '').localeCompare(String(b ?? ''));
}

Building a Paginated, Sortable Data Table with a useTable Hook in React

react hooks pagination
by codesnips 3 tabs
javascript 
import { useState, useEffect, useCallback } from 'react';

export function useLocalStorage(key, initialValue) {
  const readValue = useCallback(() => {
    if (typeof window === 'undefined') return initialValue;
    try {

Persist a React Shopping Cart to localStorage with a Context Provider

javascript react context
by codesnips 3 tabs