Hookas

Hookas is a comprehensive registry for popular React hooks, inspired by the shadcn registry system. It provides a collection of well-tested, production-ready hooks that solve common React development challenges.

How to use

Find the hook you want to use and copy the link to install the hook into your project. Please note you should have setup shadcn in your project to use this.

Hooks

State & Effects

• useToggle - Manage boolean state with a toggle function
• useDebouncedState - Manage state with debounced updates
• useDebouncedMemo - Debounce expensive computations
• useDebouncedCallback - Debounce function calls for performance
• useThrottledCallback - Throttle function calls to control execution rate
• useThrottledMemo - Throttle expensive computations
• useInterval - Run a function repeatedly with a delay
• useTimeoutEffect - Run an effect after a timeout
• useMountedEffect - Run an effect after the component is mounted
• useIsMounted - Check if the component is mounted
• useIsomorphicEffect - Run an effect on both client and server
• usePromise - Handle promises without the use hook
• useAsyncEffect - Run asynchronous operations in React effects

Data & Storage

• useQuery - Fetch data with a lightweight query hook
• useLocalStorage - Store data in local storage
• useSessionStorage - Store data in session storage

Media & UI

• useMediaQuery - Respond to CSS media queries
• useFullscreen - Control fullscreen mode
• useMediaControls - Control media elements

DOM & Events

• useClickOutside - Detect clicks outside specified elements
• useElementSize - Track element size with ResizeObserver
• useWindowSize - Track window size
• useMousePosition - Track mouse position
• useKeyboardEvent - Handle keyboard events

Scroll & Viewport

• useIsScrolled - Check if an element is scrolled
• useScrollDirection - Track scroll direction
• useIsInViewport - Check if an element is in the viewport
• useIsWindowScrolled - Check if the window is scrolled
• useScrollInfo - Get scroll information for an element

Network

• useNetwork - Monitor network status and type

Date & Time

• useDateFormat - Format dates with customizable patterns and locales

useNetwork

Monitor network connection status, type, and quality using the Network Information API.

Usage

import { useNetwork } from '@/hookas/use-network'

function NetworkStatus() {
  const {
    effectiveType,
    downlink,
    rtt,
    saveData,
    isConnectionSlow,
    isSupported,
    type,
    online
  } = useNetwork()

  if (!isSupported) {
    return <div>Network Information API not supported</div>
  }

  return (
    <div>
      <p>
        Status:
        {online ? 'Online' : 'Offline'}
      </p>
      <p>
        Connection Type:
        {effectiveType}
      </p>
      <p>
        Speed:
        {downlink}
        {' '}
        Mbps
      </p>
      <p>
        Latency:
        {rtt}
        ms
      </p>
      <p>
        Technology:
        {type}
      </p>
      {isConnectionSlow && <p>⚠️ Slow connection detected</p>}
      {saveData && <p>📱 Data saver mode enabled</p>}
    </div>
  )
}

Network State Properties

The hook returns a NetworkState object with the following properties:

• downlink: Effective bandwidth estimate in megabits per second
• downlinkMax: Maximum downlink speed in Mbps (experimental, may be undefined)
• effectiveType: Connection quality ('slow-2g', '2g', '3g', '4g')
• rtt: Round-trip time in milliseconds
• saveData: Whether data saver mode is enabled
• type: Connection technology ('wifi', 'cellular', 'ethernet', etc.)
• isSupported: Whether the Network Information API is supported
• isConnectionSlow: Computed boolean for slow connections (slow-2g or 2g)
• online: Whether the user is currently online (works in all browsers)

Browser Support

The Network Information API has limited browser support:

• ✅ Chrome/Edge (61+)
• ✅ Chrome Android (38+)
• ✅ Samsung Internet (3+)
• ❌ Firefox
• ❌ Safari

The hook gracefully handles unsupported browsers by returning default values and isSupported: false.

Install

npx shadcn@latest add https://hookas.letstri.dev/r/use-network.json

useAsyncEffect

Run an async effect.

Usage

import { useState } from 'react'
import { useAsyncEffect } from '@/hookas/use-async-effect'

function DataFetcher() {
  const [data, setData] = useState(null)

  useAsyncEffect(async () => {
    const res = await fetch('https://api.example.com/data')
    const json = await res.json()
    setData(json)
  }, [])

  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

Install

npx shadcn@latest add https://hookas.letstri.dev/r/use-async-effect.json

useElementSize

Measure the size of an element.

Usage

import { useRef } from 'react'
import { useElementSize } from '@/hookas/use-element-size'

function ResizableBox() {
  const ref = useRef(null)
  const { width, height } = useElementSize(ref)

  return (
    <div ref={ref}>
      <p>
        Width:
        {width}
        px
      </p>
      <p>
        Height:
        {height}
        px
      </p>
    </div>
  )
}

Install

npx shadcn@latest add https://hookas.letstri.dev/r/use-element-size.json

useClickOutside

Handle click outside events.

Usage

import { useRef, useState } from 'react'
import { useClickOutside } from '@/hookas/use-click-outside'

function DropdownMenu() {
  const [isOpen, setIsOpen] = useState(false)
  const ref = useRef(null)

  useClickOutside(ref, () => setIsOpen(false))

  return (
    <div ref={ref}>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</button>
      {isOpen && <div>Menu Content</div>}
    </div>
  )
}

Install

npx shadcn@latest add https://hookas.letstri.dev/r/use-click-outside.json

useToggle

Toggle a value.

Usage

import { useToggle } from '@/hookas/use-toggle'

function ToggleButton() {
  const [isOn, toggle] = useToggle(false)

  return (
    <div>
      <button onClick={toggle}>{isOn ? 'ON' : 'OFF'}</button>
      <span>
        State:
        {isOn ? 'Enabled' : 'Disabled'}
      </span>
    </div>
  )
}

Install

npx shadcn@latest add https://hookas.letstri.dev/r/use-toggle.json

useWindowSize

Get the size of the window.

Usage

import { useWindowSize } from '@/hookas/use-window-size'

function WindowSizeDisplay() {
  const { width, height } = useWindowSize()

  return (
    <div>
      <p>
        Width:
        {width}
        px
      </p>
      <p>
        Height:
        {height}
        px
      </p>
    </div>
  )
}

Install

npx shadcn@latest add https://hookas.letstri.dev/r/use-window-size.json

useIsMounted

Check if the component is mounted.

Usage

import { useEffect, useState } from 'react'
import { useIsMounted } from '@/hookas/use-is-mounted'

function MountStatus() {
  const isMounted = useIsMounted()

  return (
    <div>
      Component is
      {isMounted ? 'mounted' : 'not mounted'}
      !
    </div>
  )
}

Install

npx shadcn@latest add https://hookas.letstri.dev/r/use-is-mounted.json

useQuery

Small alternative to @tanstack/react-query.

Usage

import { useQuery } from '@/hookas/use-query'

function DataFetcher() {
  const { data, error, status, refetch } = useQuery(() => fetch('https://api.example.com/data'))

  return <div>{JSON.stringify(data)}</div>
}

Install

npx shadcn@latest add https://hookas.letstri.dev/r/use-query.json

useMediaQuery

Check if the browser matches a media query.

Usage

import { useMediaQuery } from '@/hookas/use-media-query'

function MediaQueryExample() {
  const isMobile = useMediaQuery('(max-width: 768px)')

  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>
}

Install

npx shadcn@latest add https://hookas.letstri.dev/r/use-media-query.json

useFullscreen

Handle fullscreen mode.

Usage

import { useFullscreen } from '@/hookas/use-fullscreen'

function FullscreenExample() {
  const { isFullscreen, toggleFullscreen } = useFullscreen()
}

Install

npx shadcn@latest add https://hookas.letstri.dev/r/use-fullscreen.json

useMousePosition

Track the mouse position.

Usage

import { useMousePosition } from '@/hookas/use-mouse-position'

function MousePosition() {
  const { x, y } = useMousePosition()
}

function MousePosition() {
  const ref = useRef(null)
  const { x, y } = useMousePosition(ref)

  return (
    <div ref={ref}>
      {x}
      {y}
    </div>
  )
}

Install

npx shadcn@latest add https://hookas.letstri.dev/r/use-mouse-position.json

useDebouncedCallback

Debounce a callback.

Usage

import { useDebouncedCallback } from '@/hookas/use-debounced-callback'

function DebouncedCallback() {
  const debouncedFn = useDebouncedCallback((a: number, b: number) => {
    console.log(a, b)
  }, 1000)

  return <button onClick={() => debouncedFn(1, 2)}>Debounce</button>
}

useDebouncedMemo

Debounce a memo.

Usage

import { useDebouncedMemo } from '@/hookas/use-debounced-memo'

function DebouncedM