{"id":28092412,"url":"https://github.com/letstri/hookas","last_synced_at":"2025-05-13T13:12:56.259Z","repository":{"id":287406209,"uuid":"964620473","full_name":"letstri/hookas","owner":"letstri","description":"Registry for most popular React hooks based on the shadcn/ui.","archived":false,"fork":false,"pushed_at":"2025-05-07T21:39:54.000Z","size":198,"stargazers_count":40,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-12T05:59:26.205Z","etag":null,"topics":["hooks","react","shadcn"],"latest_commit_sha":null,"homepage":"https://hookas.letstri.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/letstri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-11T14:03:59.000Z","updated_at":"2025-05-10T17:46:04.000Z","dependencies_parsed_at":"2025-04-11T15:32:10.451Z","dependency_job_id":"021c874a-9497-4e40-a8bd-d31cc4efc545","html_url":"https://github.com/letstri/hookas","commit_stats":null,"previous_names":["letstri/hookas"],"tags_count":0,"template":false,"template_full_name":"shadcn-ui/registry-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letstri%2Fhookas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letstri%2Fhookas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letstri%2Fhookas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letstri%2Fhookas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/letstri","download_url":"https://codeload.github.com/letstri/hookas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948447,"owners_count":21988959,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","react","shadcn"],"created_at":"2025-05-13T13:12:55.064Z","updated_at":"2025-05-13T13:12:56.250Z","avatar_url":"https://github.com/letstri.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hookas\n\nHookas is a comprehensive registry for popular React hooks, inspired by the [shadcn](https://ui.shadcn.com/) registry system. It provides a collection of well-tested, production-ready hooks that solve common React development challenges.\n\n## How to use\n\nFind 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.\n\n## Hooks\n\n- [useIsOnline](#useisonline) - Monitor network connectivity status with automatic reconnection handling\n- [useAsyncEffect](#useasynceffect) - Handle asynchronous operations in React effects\n- [useElementSize](#useelementsize) - Track and respond to element dimensions with ResizeObserver\n- [useClickOutside](#useclickoutside) - Detect and handle clicks outside specified elements\n- [useToggle](#usetoggle) - Manage boolean state with a convenient toggle function\n- [useWindowSize](#usewindowsize) - Monitor window dimensions\n- [useIsMounted](#useismounted) - Check if the component is mounted\n- [useQuery](#usequery) - Lightweight data fetching solution\n- [useMediaQuery](#usemediaquery) - Reactively respond to CSS media queries\n- [useFullscreen](#usefullscreen) - Control fullscreen mode\n- [useMousePosition](#usemouseposition) - Track mouse coordinates\n- [useDebouncedCallback](#usedebouncedcallback) - Optimize performance by debouncing function calls\n- [useDebouncedMemo](#usedebouncedmemo) - Debounce expensive computations\n- [useDebouncedState](#usedebouncedstate) - Manage state with debounced updates\n- [useThrottledCallback](#usethrottledcallback) - Control function execution rate with throttling\n- [usePromise](#usepromise) - Handle promises without `use` hook\n- [useMediaControls](#usemediacontrols) - Control media elements\n- [useIsScrolled](#useisscrolled) - Check if an element is scrolled\n- [useInterval](#useinterval) - Execute a function repeatedly with a delay\n- [useMountEffect](#usemounteffect) - Run an effect only after the component is mounted\n- [useIsomorphicEffect](#useisomorphiceffect) - Run an effect on the client and server\n\n### useIsOnline\n\nCheck if the user is online.\n\n#### Usage\n\n```tsx\nimport { useIsOnline } from '@/hookas/use-is-online'\n\nfunction ConnectionStatus() {\n  const isOnline = useIsOnline()\n  return \u003cdiv\u003e{isOnline ? 'Online' : 'Offline'}\u003c/div\u003e\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-is-online.json\n```\n\n### useAsyncEffect\n\nRun an async effect.\n\n#### Usage\n\n```tsx\nimport { useAsyncEffect } from '@/hookas/use-async-effect'\nimport { useState } from 'react'\n\nfunction DataFetcher() {\n  const [data, setData] = useState(null)\n\n  useAsyncEffect(async () =\u003e {\n    const res = await fetch('https://api.example.com/data')\n    const json = await res.json()\n    setData(json)\n  }, [])\n\n  return \u003cpre\u003e{JSON.stringify(data, null, 2)}\u003c/pre\u003e\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-async-effect.json\n```\n\n### useElementSize\n\nMeasure the size of an element.\n\n#### Usage\n\n```tsx\nimport { useElementSize } from '@/hookas/use-element-size'\nimport { useRef } from 'react'\n\nfunction ResizableBox() {\n  const ref = useRef(null)\n  const { width, height } = useElementSize(ref)\n\n  return (\n    \u003cdiv ref={ref}\u003e\n      \u003cp\u003e\n        Width:\n        {width}\n        px\n      \u003c/p\u003e\n      \u003cp\u003e\n        Height:\n        {height}\n        px\n      \u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-element-size.json\n```\n\n### useClickOutside\n\nHandle click outside events.\n\n#### Usage\n\n```tsx\nimport { useClickOutside } from '@/hookas/use-click-outside'\nimport { useRef, useState } from 'react'\n\nfunction DropdownMenu() {\n  const [isOpen, setIsOpen] = useState(false)\n  const ref = useRef(null)\n\n  useClickOutside(ref, () =\u003e setIsOpen(false))\n\n  return (\n    \u003cdiv ref={ref}\u003e\n      \u003cbutton onClick={() =\u003e setIsOpen(!isOpen)}\u003eToggle Menu\u003c/button\u003e\n      {isOpen \u0026\u0026 \u003cdiv\u003eMenu Content\u003c/div\u003e}\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-click-outside.json\n```\n\n### useToggle\n\nToggle a value.\n\n#### Usage\n\n```tsx\nimport { useToggle } from '@/hookas/use-toggle'\n\nfunction ToggleButton() {\n  const [isOn, toggle] = useToggle(false)\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={toggle}\u003e{isOn ? 'ON' : 'OFF'}\u003c/button\u003e\n      \u003cspan\u003e\n        State:\n        {isOn ? 'Enabled' : 'Disabled'}\n      \u003c/span\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-toggle.json\n```\n\n### useWindowSize\n\nGet the size of the window.\n\n#### Usage\n\n```tsx\nimport { useWindowSize } from '@/hookas/use-window-size'\n\nfunction WindowSizeDisplay() {\n  const { width, height } = useWindowSize()\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003e\n        Width:\n        {width}\n        px\n      \u003c/p\u003e\n      \u003cp\u003e\n        Height:\n        {height}\n        px\n      \u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-window-size.json\n```\n\n### useIsMounted\n\nCheck if the component is mounted.\n\n#### Usage\n\n```tsx\nimport { useIsMounted } from '@/hookas/use-is-mounted'\nimport { useEffect, useState } from 'react'\n\nfunction MountStatus() {\n  const isMounted = useIsMounted()\n\n  return (\n    \u003cdiv\u003e\n      Component is\n      {isMounted ? 'mounted' : 'not mounted'}\n      !\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-is-mounted.json\n```\n\n### useQuery\n\nSmall alternative to @tanstack/react-query.\n\n#### Usage\n\n```tsx\nimport { useQuery } from '@/hookas/use-query'\n\nfunction DataFetcher() {\n  const { data, error, status, refetch } = useQuery(() =\u003e fetch('https://api.example.com/data'))\n\n  return \u003cdiv\u003e{JSON.stringify(data)}\u003c/div\u003e\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-query.json\n```\n\n### useMediaQuery\n\nCheck if the browser matches a media query.\n\n#### Usage\n\n```tsx\nimport { useMediaQuery } from '@/hookas/use-media-query'\n\nfunction MediaQueryExample() {\n  const isMobile = useMediaQuery('(max-width: 768px)')\n\n  return \u003cdiv\u003e{isMobile ? 'Mobile' : 'Desktop'}\u003c/div\u003e\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-media-query.json\n```\n\n### useFullscreen\n\nHandle fullscreen mode.\n\n#### Usage\n\n```tsx\nimport { useFullscreen } from '@/hookas/use-fullscreen'\n\nfunction FullscreenExample() {\n  const { isFullscreen, toggleFullscreen } = useFullscreen()\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-fullscreen.json\n```\n\n### useMousePosition\n\nTrack the mouse position.\n\n#### Usage\n\n```tsx\nimport { useMousePosition } from '@/hookas/use-mouse-position'\n\nfunction MousePosition() {\n  const { x, y } = useMousePosition()\n}\n\nfunction MousePosition() {\n  const ref = useRef(null)\n  const { x, y } = useMousePosition(ref)\n\n  return (\n    \u003cdiv ref={ref}\u003e\n      {x}\n      {y}\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-mouse-position.json\n```\n\n### useDebouncedCallback\n\nDebounce a callback.\n\n#### Usage\n\n```tsx\nimport { useDebouncedCallback } from '@/hookas/use-debounced-callback'\n\nfunction DebouncedCallback() {\n  const debouncedFn = useDebouncedCallback((a: number, b: number) =\u003e {\n    console.log(a, b)\n  }, 1000)\n\n  return \u003cbutton onClick={() =\u003e debouncedFn(1, 2)}\u003eDebounce\u003c/button\u003e\n}\n```\n\n### useDebouncedMemo\n\nDebounce a memo.\n\n#### Usage\n\n```tsx\nimport { useDebouncedMemo } from '@/hookas/use-debounced-memo'\n\nfunction DebouncedMemo() {\n  const debouncedMemo = useDebouncedMemo(() =\u003e 'Hello', [1, 2, 3], 1000)\n\n  return \u003cdiv\u003e{debouncedMemo}\u003c/div\u003e\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-debounced-memo.json\n```\n\n### useDebouncedState\n\nDebounce a state.\n\n#### Usage\n\n```tsx\nimport { useDebouncedState } from '@/hookas/use-debounced-state'\n\nfunction DebouncedState() {\n  const [debouncedState, state, setState] = useDebouncedState('Hello', 1000)\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-debounced-state.json\n```\n\n### useThrottledCallback\n\nThrottle a callback.\n\n#### Usage\n\n```tsx\nimport { useThrottledCallback } from '@/hookas/use-throttled-callback'\n\nfunction ThrottledCallback() {\n  const throttledFn = useThrottledCallback((a: number, b: number) =\u003e {\n    console.log(a, b)\n  }, 1000)\n\n  return \u003cbutton onClick={() =\u003e throttledFn(1, 2)}\u003eThrottle\u003c/button\u003e\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-throttled-callback.json\n```\n\n### usePromise\n\nHandle promises without `use` hook.\n\n#### Usage\n\n```tsx\nimport { usePromise } from '@/hookas/use-promise'\n\nfunction PromiseExample() {\n  const data = usePromise(() =\u003e Promise.resolve([{ name: 'Valerii' }]), [])\n\n  return (\n    \u003cdiv\u003e\n      {data.map(item =\u003e (\n        \u003cdiv key={item.name}\u003e{item.name}\u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-promise.json\n```\n\n### useMediaControls\n\nControl media elements.\n\n#### Usage\n\n```tsx\nimport { useMediaControls } from '@/hookas/use-media-controls'\n\nfunction MediaControls() {\n  const mediaRef = useRef\u003cHTMLVideoElement\u003e(null)\n  const {\n    play,\n    pause,\n    toggle,\n    stop,\n    toggleMute,\n    setVolume,\n    setCurrentTime,\n    isPlaying,\n    isMuted,\n    volume,\n    currentTime,\n    duration,\n  } = useMediaControls(mediaRef)\n\n  return (\n    \u003cdiv\u003e\n      \u003cvideo ref={mediaRef} src=\"src/assets/video.mp4\" /\u003e\n      \u003cbutton onClick={play}\u003ePlay\u003c/button\u003e\n      \u003cbutton onClick={pause}\u003ePause\u003c/button\u003e\n      \u003cbutton onClick={toggle}\u003eToggle\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-media-controls.json\n```\n\n### useIsScrolled\n\nCheck if an element is scrolled.\n\n#### Usage\n\n```tsx\nimport { useIsScrolled } from '@/hookas/use-is-scrolled'\n\nfunction IsScrolled() {\n  const ref = useRef(null)\n  const isScrolled = useIsScrolled(ref)\n\n  return \u003cdiv ref={ref}\u003e{isScrolled ? 'Scrolled' : 'Not scrolled'}\u003c/div\u003e\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-is-scrolled.json\n```\n\n### useInterval\n\nExecute a function repeatedly with a delay.\n\n#### Usage\n\n```tsx\nimport { useInterval } from '@/hookas/use-interval'\n\nfunction IntervalExample() {\n  useInterval(() =\u003e console.log('Hello'), 1000)\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-interval.json\n```\n\n### useMountEffect\n\nRun an effect only after the component is mounted.\n\n#### Usage\n\n```tsx\nimport { useMountEffect } from '@/hookas/use-mount-effect'\n\nfunction MountEffect() {\n  useMountEffect(() =\u003e console.log('Hello'), [])\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-mount-effect.json\n```\n\n### useIsomorphicEffect\n\nRun an effect on the client and server.\n\n#### Usage\n\n```tsx\nimport { useIsomorphicEffect } from '@/hookas/use-isomorphic-effect'\n\nfunction IsomorphicEffect() {\n  useIsomorphicEffect(() =\u003e {\n    console.log('Hello')\n  }, [])\n}\n```\n\n#### Install\n\n```bash\nnpx shadcn@latest add https://hookas.letstri.dev/r/use-isomorphic-effect.json\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletstri%2Fhookas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fletstri%2Fhookas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletstri%2Fhookas/lists"}