hooks

typescript
export interface Todo {
  id: string;
  title: string;
  done: boolean;
  pending: boolean;
}

Optimistic To-Do Toggle in React with Rollback via useReducer

react optimistic-ui hooks
by codesnips 3 tabs
typescript
import { useEffect, useRef } from "react";

const FOCUSABLE = [
  "a[href]",
  "button:not([disabled])",
  "textarea:not([disabled])",

Trap Keyboard Focus in a Modal with a useFocusTrap React Hook

react hooks accessibility
by codesnips 3 tabs
typescript
import { z } from 'zod';

export const signupSchema = z
  .object({
    email: z.string().min(1, 'Email is required').email('Enter a valid email'),
    password: z

React Hook Form + Zod resolver

react forms react-hook-form
by codesnips 3 tabs
typescript
export const FLAG_REGISTRY = {
  newDashboard: {
    default: false as boolean,
    description: 'Renders the redesigned dashboard shell',
  },
  maxUploadMb: {

Feature flags with a typed registry

typescript feature-flags react
by codesnips 3 tabs
typescript
import { z } from "zod";

export const signupSchema = z
  .object({
    email: z.string().min(1, "Email is required").email("Enter a valid email"),
    username: z

React Signup Form Validation With Zod and Field-Level Errors

react zod forms
by codesnips 3 tabs
javascript
export const required = (msg = 'This field is required') => (value) =>
  value && value.trim() !== '' ? '' : msg;

export const minLength = (n, msg) => (value) =>
  value && value.length >= n ? '' : msg || `Must be at least ${n} characters`;

Field-by-Field Signup Validation with a Reusable useForm Hook in React

react hooks forms
by codesnips 4 tabs
typescript
import { useCallback, useEffect, useState } from "react";

type Patch = Record<string, string | null | undefined>;

function readParams(): URLSearchParams {
  return new URLSearchParams(window.location.search);

Sync a Filter Panel to the URL Query String with a Custom useSearchParams Hook

react hooks url-state
by codesnips 3 tabs
javascript
import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';

// 1. useState - managing component state
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

React hooks - useState, useEffect, and custom hooks

react javascript hooks
by Alex Chang 1 tab
javascript
export function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}

export function move(list, from, to) {
  const next = list.slice();

Drag-and-Drop Sortable List with Pointer Events and an Immutable Reorder Helper

react drag-and-drop pointer-events
by codesnips 3 tabs
javascript
import { useReducer, useCallback } from 'react';

const initialState = (present) => ({ past: [], present, future: [] });

function historyReducer(state, action) {
  const { past, present, future } = state;

Build an Undo/Redo History Stack with a useHistory Reducer Hook in React

react hooks usereducer
by codesnips 3 tabs
javascript
export const initialState = (steps, initialData = {}) => ({
  steps,
  stepIndex: 0,
  data: initialData,
  errors: {},
});

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

react hooks usereducer
by codesnips 4 tabs
javascript
export const wizardMachine = {
  initial: 'account',
  states: {
    account: {
      next: 'profile',
      canLeave: (data) => Boolean(data.email && data.password),

Multi-Step Wizard Form With a Context-Driven State Machine in React

react state-machine context
by codesnips 3 tabs