React Hooks Shadcn Registry

Professional React hooks registry with 40+ copy-paste custom hooks for JavaScript, TypeScript, and Next.js. Install individual hooks directly into your project via shadcn/ui CLI. Full source code ownership, complete customization, and production-ready implementations.

Professional React Hooks Registry for Modern JavaScript Development

React hooks are essential building blocks for modern JavaScript and TypeScript applications. Our shadcn/ui registry delivers production-ready hooks directly into your codebase with complete source control and customization freedom.

Core Registry Benefits

Complete Source Ownership: Hooks install as source code - no external dependencies or package management
TypeScript-First: Comprehensive type definitions for React 18+ and Next.js applications
Production-Optimized: Memory management, cleanup patterns, and performance best practices built-in
Framework Compatible: Works with Next.js, Vite, Create React App, and modern tooling
SSR Ready: Server-side rendering support with proper hydration handling

Hook Categories

State Management: localStorage, sessionStorage, boolean states, counters, toggles, maps
UI Interactions: click detection, hover effects, mouse tracking, scroll control
Browser APIs: media queries, window sizing, dark mode, clipboard operations
Performance: debouncing, throttling, intervals, timeouts, memory leak prevention

React State Management Hooks - localStorage, sessionStorage & More

Essential React hooks for state management in JavaScript and TypeScript applications. Handle localStorage persistence, sessionStorage, boolean states, counters, and complex state logic with these production-ready hooks.

useLocalStorage

Loading component...

"use client"import { useCallback, useEffect, useState } from "react"import type { Dispatch, SetStateAction } from "react"import { useEventCallback } from "@/components/ui/kibo-ui/use-event-callback"import { useEventListener } from "@/components/ui/kibo-ui/use-event-listener"declare global {  interface WindowEventMap {    "local-storage": CustomEvent  }}type UseLocalStorageOptions<T> = {  serializer?: (value: T) => string  deserializer?: (value: string) => T  initializeWithValue?: boolean}const IS_SERVER = typeof window === "undefined"export function useLocalStorage<T>(  key: string,  initialValue: T | (() => T),  options: UseLocalStorageOptions<T> = {},): [T, Dispatch<SetStateAction<T>>, () => void] {  const { initializeWithValue = true } = options  const serializer = useCallback<(value: T) => string>(    (value) => {      if (options.serializer) {        return options.serializer(value)      }      return JSON.stringify(value)    },    [options],  )  const deserializer = useCallback<(value: string) => T>(    (value) => {      if (options.deserializer) {        return options.deserializer(value)      }      // Support 'undefined' as a value      if (value === "undefined") {        return undefined as unknown as T      }      const defaultValue =        initialValue instanceof Function ? initialValue() : initialValue      let parsed: unknown      try {        parsed = JSON.parse(value)      } catch (error) {        console.error("Error parsing JSON:", error)        return defaultValue // Return initialValue if parsing fails      }      return parsed as T    },    [options, initialValue],  )  // Get from local storage then  // parse stored json or return initialValue  const readValue = useCallback((): T => {    const initialValueToUse =      initialValue instanceof Function ? initialValue() : initialValue    // Prevent build error "window is undefined" but keep working    if (IS_SERVER) {      return initialValueToUse    }    try {      const raw = window.localStorage.getItem(key)      return raw ? deserializer(raw) : initialValueToUse    } catch (error) {      console.warn(`Error reading localStorage key "${key}":`, error)      return initialValueToUse    }  }, [initialValue, key, deserializer])  const [storedValue, setStoredValue] = useState(() => {    if (initializeWithValue) {      return readValue()    }    return initialValue instanceof Function ? initialValue() : initialValue  })  // Return a wrapped version of useState's setter function that ...  // ... persists the new value to localStorage.  const setValue: Dispatch<SetStateAction<T>> = useEventCallback((value) => {    // Prevent build error "window is undefined" but keeps working    if (IS_SERVER) {      console.warn(        `Tried setting localStorage key "${key}" even though environment is not a client`,      )    }    try {      // Allow value to be a function so we have the same API as useState      const newValue = value instanceof Function ? value(readValue()) : value      // Save to local storage      window.localStorage.setItem(key, serializer(newValue))      // Save state      setStoredValue(newValue)      // We dispatch a custom event so every similar useLocalStorage hook is notified      window.dispatchEvent(new StorageEvent("local-storage", { key }))    } catch (error) {      console.warn(`Error setting localStorage key "${key}":`, error)    }  })  const removeValue = useEventCallback(() => {    // Prevent build error "window is undefined" but keeps working    if (IS_SERVER) {      console.warn(        `Tried removing localStorage key "${key}" even though environment is not a client`,      )    }    const defaultValue =      initialValue instanceof Function ? initialValue() : initialValue    // Remove the key from local storage    window.localStorage.removeItem(key)    // Save state with default value    setStoredValue(defaultValue)    // We dispatch a custom event so every similar useLocalStorage hook is notified    window.dispatchEvent(new StorageEvent("local-storage", { key }))  })  useEffect(() => {    setStoredValue(readValue())    // eslint-disable-next-line react-hooks/exhaustive-deps  }, [key])  const handleStorageChange = useCallback(    (event: StorageEvent | CustomEvent) => {      if ((event as StorageEvent).key && (event as StorageEvent).key !== key) {        return      }      setStoredValue(readValue())    },    [key, readValue],  )  // this only works for other documents, not the current one  useEventListener("storage", handleStorageChange)  // this is a custom event, triggered in writeValueToLocalStorage  // See: useLocalStorage()  useEventListener("local-storage", handleStorageChange)  return [storedValue, setValue, removeValue]}export type { UseLocalStorageOptions }

Persist state across browser sessions with automatic serialization and cross-tab synchronization. Perfect for user preferences, authentication tokens, and application settings.

React Hooks Shadcn Registry

Reactuse-local-storage

Reactbutton

Reactuse-mouse-position

Reactuse-scroll-lock

Reactbutton

Reactbadge

Reactlabel

Reactuse-media-query

Reactbutton

Reactinput

Reactlabel

Reactinput

Reactbutton

Reactuse-is-client

Reactbutton

Reactuse-event-listener

Reactbutton

Reactuse-countdown

Reactuse-ternary-dark-mode

Reactbutton

Reactbadge

Reactlabel

Reactselect

Reactuse-read-local-storage

On this page