</>

React Snippets

Searchable, copy-paste-ready React code snippets.

8 results

import { useReducer } from 'react';

const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        values: {

Form State Management with useReducer

A reusable, type-safe React hook for managing complex form state (values, errors, touched) using useReducer.

tsx

import { useState, useEffect } from 'react';

function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prevValue: T) => T)) => void] {
  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);

React hook for persistent state in localStorage

A custom React hook that synchronizes component state with browser localStorage, supporting functional updates and error resilience.

tsx

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

interface UseIntersectionObserverOptions
  extends Partial<IntersectionObserverInit> {
  threshold?: number | number[];
  rootMargin?: string;
}

Intersection Observer Hook for Lazy Loading and Animations

A lightweight, reusable React hook that triggers callbacks when elements enter or leave the viewport—ideal for lazy-loading images or starting animations.

tsx

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

export function FadeIn({ children }: { children: React.ReactNode }) {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const node = ref.current;

Fade-in animation with requestAnimationFrame

A performant, CSS-in-JS fade-in animation using useState, useEffect, and requestAnimationFrame for smooth entrance transitions.

tsx

import { useState, useCallback, useMemo } from 'react';

interface UseFormOptions<T> {
  initialValues: T;
  validate?: (values: T) => Partial<Record<keyof T, string>>;
}

interface UseFormReturn<T> {

Lightweight useForm hook with validation and dirty tracking

A minimal, self-contained React hook for form state management with validation, dirty tracking, and submission handling—no external dependencies.

tsx

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

export function DebouncedSearchInput({
  onSearch,
  delay = 300,
}: {
  onSearch: (query: string) => void;
  delay?: number;

Debounced search input with useEffect and useRef

A reusable search input that delays API calls until user stops typing for a specified duration.

tsx

import { useState, useCallback } from 'react';

function useToggle(initialValue: boolean = false) {
  const [value, setValue] = useState<boolean>(initialValue);

  const toggle = useCallback(() => {
    setValue(prev => !prev);
  }, []);

Custom useToggle hook with optional initial state

A lightweight, reusable React hook for managing boolean toggle state with optional initial value.

tsx

import { useState, useEffect, useRef, useCallback } from 'react';

interface AccessibleModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}

Accessible Modal with Focus Trapping and Dismissal

A fully accessible React modal that traps focus, supports ESC key and click-outside dismissal, and announces state changes to screen readers.