hooks

javascript
import { useState, useRef, useEffect, useCallback } from "react";

export function useCarousel(length, { delay = 4000 } = {}) {
  const [index, setIndex] = useState(0);
  const [paused, setPaused] = useState(false);
  const savedCallback = useRef(null);

Autoplay Image Carousel in React with Pause-on-Hover via useRef and useEffect

react hooks carousel
by codesnips 3 tabs
typescript
import { useCallback, useEffect, useRef, useState } from "react";

export function useIntersectionObserver(options?: IntersectionObserverInit) {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const nodeRef = useRef<Element | null>(null);
  const optionsKey = JSON.stringify(options ?? {});

Infinite-Scroll Feed with a React IntersectionObserver Hook and Cursor Pagination

react hooks intersection-observer
by codesnips 3 tabs
typescript
export interface Post {
  id: string;
  body: string;
  liked: boolean;
  likeCount: number;
}

React Query optimistic update for likes

react typescript frontend
by codesnips 3 tabs
javascript
import React from 'react';

export function UndoSnackbar({ pending, onUndo }) {
  if (!pending) return null;

  return (

Undoable Delete with a Snackbar and useReducer Timeout Controller in React

react hooks usereducer
by codesnips 3 tabs
typescript
export interface Page<T> {
  items: T[];
  nextCursor: string | null;
}

export interface Post {

Infinite-Scroll List in React with IntersectionObserver and Cursor Pagination

react hooks infinite-scroll
by codesnips 3 tabs
javascript
import { useState, useRef, useEffect, useCallback } from 'react';

export function useOnScreen(options = {}) {
  const [node, setNode] = useState(null);
  const [isIntersecting, setIsIntersecting] = useState(false);

Infinite Scroll in React with an IntersectionObserver useOnScreen Hook

react hooks intersection-observer
by codesnips 3 tabs
typescript
import { createContext, useContext, useEffect, useMemo, useState, ReactNode } from 'react';
import { authApi, User } from './authApi';

type Status = 'loading' | 'authenticated' | 'anonymous';

interface AuthValue {

Protect React Routes with an Auth Context and a RequireAuth Wrapper

react react-router authentication
by codesnips 4 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

Field-Level Signup Validation with Zod and a Typed useZodForm Hook

react zod forms
by codesnips 3 tabs
typescript
import React from 'react';
import { useToasts } from './useToasts';

export function Toaster() {
  const { toasts, dismiss } = useToasts();

Frontend: toast notifications via a small event bus

react frontend typescript
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(() => {

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