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.
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.
- useIsOnline - Monitor network connectivity status with automatic reconnection handling
- useAsyncEffect - Handle asynchronous operations in React effects
- useElementSize - Track and respond to element dimensions with ResizeObserver
- useClickOutside - Detect and handle clicks outside specified elements
- useToggle - Manage boolean state with a convenient toggle function
- useWindowSize - Monitor window dimensions
- useIsMounted - Check if the component is mounted
- useQuery - Lightweight data fetching solution
- useMediaQuery - Reactively respond to CSS media queries
- useFullscreen - Control fullscreen mode
- useMousePosition - Track mouse coordinates
- useDebouncedCallback - Optimize performance by debouncing function calls
- useDebouncedMemo - Debounce expensive computations
- useDebouncedState - Manage state with debounced updates
- useThrottledCallback - Control function execution rate with throttling
- usePromise - Handle promises without
usehook - useMediaControls - Control media elements
Check if the user is online.
import { useIsOnline } from '@/hookas/use-is-online'
function ConnectionStatus() {
const isOnline = useIsOnline()
return <div>{isOnline ? 'Online' : 'Offline'}</div>
}npx shadcn@latest add https://hookas.letstri.dev/r/use-is-online.jsonRun an async effect.
import { useAsyncEffect } from '@/hookas/use-async-effect'
import { useState } from 'react'
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>
}npx shadcn@latest add https://hookas.letstri.dev/r/use-async-effect.jsonMeasure the size of an element.
import { useElementSize } from '@/hookas/use-element-size'
import { useRef } from 'react'
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>
)
}npx shadcn@latest add https://hookas.letstri.dev/r/use-element-size.jsonHandle click outside events.
import { useClickOutside } from '@/hookas/use-click-outside'
import { useRef, useState } from 'react'
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>
)
}npx shadcn@latest add https://hookas.letstri.dev/r/use-click-outside.jsonToggle a value.
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>
)
}npx shadcn@latest add https://hookas.letstri.dev/r/use-toggle.jsonGet the size of the window.
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>
)
}npx shadcn@latest add https://hookas.letstri.dev/r/use-window-size.jsonCheck if the component is mounted.
import { useIsMounted } from '@/hookas/use-is-mounted'
import { useEffect, useState } from 'react'
function MountStatus() {
const isMounted = useIsMounted()
return (
<div>
Component is
{isMounted ? 'mounted' : 'not mounted'}
!
</div>
)
}npx shadcn@latest add https://hookas.letstri.dev/r/use-is-mounted.jsonSmall alternative to @tanstack/react-query.
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>
}npx shadcn@latest add https://hookas.letstri.dev/r/use-query.jsonCheck if the browser matches a media query.
import { useMediaQuery } from '@/hookas/use-media-query'
function MediaQueryExample() {
const isMobile = useMediaQuery('(max-width: 768px)')
return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>
}npx shadcn@latest add https://hookas.letstri.dev/r/use-media-query.jsonHandle fullscreen mode.
import { useFullscreen } from '@/hookas/use-fullscreen'
function FullscreenExample() {
const { isFullscreen, toggleFullscreen } = useFullscreen()
}npx shadcn@latest add https://hookas.letstri.dev/r/use-fullscreen.jsonTrack the mouse position.
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>
)
}npx shadcn@latest add https://hookas.letstri.dev/r/use-mouse-position.jsonDebounce a callback.
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>
}Debounce a memo.
import { useDebouncedMemo } from '@/hookas/use-debounced-memo'
function DebouncedMemo() {
const debouncedMemo = useDebouncedMemo(() => 'Hello', [1, 2, 3], 1000)
return <div>{debouncedMemo}</div>
}npx shadcn@latest add https://hookas.letstri.dev/r/use-debounced-memo.jsonDebounce a state.
import { useDebouncedState } from '@/hookas/use-debounced-state'
function DebouncedState() {
const [debouncedState, state, setState] = useDebouncedState('Hello', 1000)
}npx shadcn@latest add https://hookas.letstri.dev/r/use-debounced-state.jsonThrottle a callback.
import { useThrottledCallback } from '@/hookas/use-throttled-callback'
function ThrottledCallback() {
const throttledFn = useThrottledCallback((a: number, b: number) => {
console.log(a, b)
}, 1000)
return <button onClick={() => throttledFn(1, 2)}>Throttle</button>
}npx shadcn@latest add https://hookas.letstri.dev/r/use-throttled-callback.jsonHandle promises without use hook.
import { usePromise } from '@/hookas/use-promise'
function PromiseExample() {
const data = usePromise(async () => [{ name: 'Valerii' }], [])
return (
<div>
{data.map(item => (
<div key={item.name}>{item.name}</div>
))}
</div>
)
}npx shadcn@latest add https://hookas.letstri.dev/r/use-promise.jsonControl media elements.
import { useMediaControls } from '@/hookas/use-media-controls'
function MediaControls() {
const mediaRef = useRef<HTMLVideoElement>(null)
const {
play,
pause,
toggle,
stop,
toggleMute,
setVolume,
setCurrentTime,
isPlaying,
isMuted,
volume,
currentTime,
duration,
} = useMediaControls(mediaRef)
return (
<div>
<video ref={mediaRef} src="src/assets/video.mp4" />
<button onClick={play}>Play</button>
<button onClick={pause}>Pause</button>
<button onClick={toggle}>Toggle</button>
</div>
)
}npx shadcn@latest add https://hookas.letstri.dev/r/use-media-controls.json