Hookas is a registry for most popular React hooks based on the shadcn registry system.
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 - Check if the user is online
- useAsyncEffect - Run asynchronous effects safely
- useElementSize - Track element dimensions
- useClickOutside - Detect clicks outside an element
- useToggle - Toggle boolean states easily
- useWindowSize - Track window dimensions
- useIsMounted - Check if the component is mounted
- useQuery - Small alternative to @tanstack/react-query
- useMediaQuery - Check if the user is online
- useFullscreen - Handle fullscreen mode
- useMousePosition - Track the mouse position
- useDebounceFunction - Debounce a function
- useThrottledFunction - Throttle a function
- usePromise - Small alternative to
usehook
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({ fetcher: () => 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 user is online.
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 function.
import { useDebounceFunction } from '@/hookas/use-debounce-function'
function DebouncedFunction() {
const debouncedFn = useDebounceFunction((a: number, b: number) => {
console.log(a, b)
}, 1000)
return <button onClick={() => debouncedFn(1, 2)}>Debounce</button>
}npx shadcn@latest add https://hookas.letstri.dev/r/use-debounce-function.jsonThrottle a function.
import { useThrottledFunction } from '@/hookas/use-throttled-function'
function ThrottledFunction() {
const throttledFn = useThrottledFunction((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-function.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.json