{"_id":"@axiora-ui/ui-hooks","_rev":"2-62271e06be8cffffd63b2bb16be2c053","name":"@axiora-ui/ui-hooks","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@axiora-ui/ui-hooks","version":"1.0.0","keywords":["axiora-ui","design-system","react","hooks","use-toggle","typescript"],"author":{"name":"axiora-ui"},"license":"MIT","_id":"@axiora-ui/ui-hooks@1.0.0","maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"dist":{"shasum":"e2df284c745ed1ec7126bcfeee786572f3cab652","tarball":"https://registry.npmjs.org/@axiora-ui/ui-hooks/-/ui-hooks-1.0.0.tgz","fileCount":4,"integrity":"sha512-3NnbJLPvH5kd+jPRfpS83Umq+Ves7FlzWeC98o1ci4ftxFSnpg+NdMVfBPObjmQsChm6y2W9vpBblaPXlfodNg==","signatures":[{"sig":"MEQCICAhNhy+ZzXPRFu4tPiWklsG6SzOxZldFs7iOCH51oxFAiAx6mT10gsAsFl9k3Qnizg9t+gKlGhhdMphgsznkKJGlw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8463},"type":"module","_from":"file:axiora-ui-ui-hooks-1.0.0.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"lint":"tsc --noEmit -p tsconfig.json","test":"vitest run","build":"tsup src/index.ts --format esm --dts --clean --external react"},"_npmUser":{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"},"_resolved":"/tmp/69e41476fb4f7111bcf42b4a449a9329/axiora-ui-ui-hooks-1.0.0.tgz","_integrity":"sha512-3NnbJLPvH5kd+jPRfpS83Umq+Ves7FlzWeC98o1ci4ftxFSnpg+NdMVfBPObjmQsChm6y2W9vpBblaPXlfodNg==","_npmVersion":"10.9.8","description":"Reusable React hooks for the Axiora UI design system.","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-hooks_1.0.0_1782386953817_0.013328006991218944","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"_id":"@axiora-ui/ui-hooks@2.0.0","dist":{"shasum":"8e9f8a0ef18acb36c2028e537164c870c2515701","tarball":"https://registry.npmjs.org/@axiora-ui/ui-hooks/-/ui-hooks-2.0.0.tgz","fileCount":4,"integrity":"sha512-98vYef4peyXp0T/Xf/Fkf59OL8j7dDfwQZnqfaWGujVhV+Z+sZSdJdr+qLbvzGjadl0J0v5ESzPIsnohSLmzVA==","signatures":[{"sig":"MEYCIQDPl8y2Ag9ir96Da75OBYrgjhYxWWsMCcsNAna5fcE1lQIhANDmKzwIyOgpZiC7z3BjyEGCHLvrpfgyQBzakEIdceb9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFAlYRK1q0upARVtf2gVx19SuBGEP+mNGS/z9XdBZllZAiAwLcbn3CM4pGTGZBNYIr9oga7YPIAyD+mV4qyx2u/Zbg=="}],"unpackedSize":24088},"name":"@axiora-ui/ui-hooks","type":"module","_from":"file:axiora-ui-ui-hooks-2.0.0.tgz","author":{"name":"axiora-ui"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"license":"MIT","scripts":{"lint":"tsc --noEmit -p tsconfig.json","test":"vitest run","build":"tsup src/index.ts --format esm --dts --clean --external react"},"version":"2.0.0","_npmUser":{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"},"keywords":["axiora-ui","design-system","react","hooks","use-toggle","typescript"],"_resolved":"/tmp/50b35b2bc68ea7da251f68812dafab11/axiora-ui-ui-hooks-2.0.0.tgz","_integrity":"sha512-98vYef4peyXp0T/Xf/Fkf59OL8j7dDfwQZnqfaWGujVhV+Z+sZSdJdr+qLbvzGjadl0J0v5ESzPIsnohSLmzVA==","_npmVersion":"10.9.8","description":"Reusable React hooks for the Axiora UI design system.","directories":{},"maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"sideEffects":false,"_nodeVersion":"22.23.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@testing-library/react":"^16.3.3","@testing-library/jest-dom":"^6.9.1","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":"^19.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-hooks_2.0.0_1790005861585_0.25458686971732436"}}},"time":{"created":"2026-06-25T11:29:13.624Z","modified":"2026-09-21T15:51:01.825Z","1.0.0":"2026-06-25T11:29:13.941Z","2.0.0":"2026-09-21T15:51:01.669Z"},"author":{"name":"axiora-ui"},"license":"MIT","keywords":["axiora-ui","design-system","react","hooks","use-toggle","typescript"],"description":"Reusable React hooks for the Axiora UI design system.","maintainers":[{"name":"axiora-ui","email":"dhineshkumardevelopment80@gmail.com"}],"readme":"# @axiora-ui/ui-hooks\n\nReusable React hooks for common UI interaction patterns. Every hook is standalone — no cross-hook dependencies. Drop them into any React 19 application.\n\n**Status:** ✅ **16 hooks implemented** · Storybook stories for all · Vitest coverage\n\n---\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Hooks inventory](#hooks-inventory)\n- [Phase 4 hooks](#phase-4-hooks)\n- [Phase 6 hooks](#phase-6-hooks)\n- [Usage examples](#usage-examples)\n- [Build & test](#build--test)\n- [Future hooks](#future-hooks)\n\n---\n\n## Installation\n\n```json\n\"dependencies\": {\n  \"@axiora-ui/ui-hooks\": \"workspace:*\"\n}\n```\n\n**Peer dependency:** `react` ^19.0.0\n\n---\n\n## Hooks inventory\n\n| Hook                      | Phase | Description                                | Storybook | Tests |\n| ------------------------- | ----- | ------------------------------------------ | --------- | ----- |\n| `useToggle`               | 4     | Boolean state with toggle / setOn / setOff | ✅        | ✅    |\n| `useDebounce`             | 4     | Debounce a value by delay                  | ✅        | ✅    |\n| `useLocalStorage`         | 4     | Sync state with `localStorage`             | ✅        | ✅    |\n| `useMediaQuery`           | 4     | React to CSS media query changes           | ✅        | ✅    |\n| `useClickOutside`         | 4     | Detect clicks outside a ref element        | ✅        | ✅    |\n| `useFetch`                | 4     | Minimal fetch with loading, error, refetch | ✅        | ✅    |\n| `useAsync`                | 6     | Run async functions with loading/error     | ✅        | ✅    |\n| `usePrevious`             | 6     | Track the previous render value            | ✅        | ✅    |\n| `useThrottle`             | 6     | Throttle a value by delay                  | ✅        | ✅    |\n| `useSessionStorage`       | 6     | Sync state with `sessionStorage`           | ✅        | ✅    |\n| `useIntersectionObserver` | 6     | Detect element visibility in viewport      | ✅        | ✅    |\n| `useForm`                 | 6     | Lightweight form state, validation, submit | ✅        | ✅    |\n| `useKeyPress`             | Opt.  | Detect keyboard key press/hold             | ✅        | ✅    |\n| `useWindowSize`           | Opt.  | Track `window.innerWidth/Height`           | ✅        | ✅    |\n| `useResizeObserver`       | Opt.  | Observe element resize dimensions          | ✅        | ✅    |\n| `useCounter`              | Opt.  | Counter with min/max/step bounds           | ✅        | ✅    |\n\nBrowse **Hooks/** in Storybook for interactive demos.\n\n---\n\n## Phase 4 hooks\n\nCore interaction hooks for toggles, persistence, responsiveness, and data fetching.\n\n## Phase 6 hooks\n\nExtended hooks for async workflows, performance (throttle/previous), session persistence, visibility detection, and form handling.\n\n---\n\n## Usage examples\n\n### useToggle\n\n```tsx\nimport { useToggle } from \"@axiora-ui/ui-hooks\";\n\nconst { value: isVisible, toggle } = useToggle(false);\n```\n\n### useDebounce\n\n```tsx\nimport { useDebounce } from \"@axiora-ui/ui-hooks\";\n\nconst [query, setQuery] = useState(\"\");\nconst debouncedQuery = useDebounce(query, 300);\n```\n\n### useAsync\n\n```tsx\nimport { useAsync } from \"@axiora-ui/ui-hooks\";\n\nconst { data, error, loading, execute } = useAsync(async () => {\n  const response = await fetch(\"/api/profile\");\n  return response.json();\n});\n```\n\n### usePrevious\n\n```tsx\nimport { usePrevious } from \"@axiora-ui/ui-hooks\";\n\nconst previousCount = usePrevious(count);\n```\n\n### useThrottle\n\n```tsx\nimport { useThrottle } from \"@axiora-ui/ui-hooks\";\n\nconst throttledScroll = useThrottle(scrollY, 200);\n```\n\n### useSessionStorage\n\n```tsx\nimport { useSessionStorage } from \"@axiora-ui/ui-hooks\";\n\nconst [tab, setTab] = useSessionStorage(\"active-tab\", \"home\");\n```\n\n### useIntersectionObserver\n\n```tsx\nimport { useRef } from \"react\";\nimport { useIntersectionObserver } from \"@axiora-ui/ui-hooks\";\n\nconst ref = useRef<HTMLDivElement>(null);\nconst isVisible = useIntersectionObserver(ref, { threshold: 0.5 });\n```\n\n### useForm\n\n```tsx\nimport { useForm } from \"@axiora-ui/ui-hooks\";\n\nconst { values, errors, handleChange, handleSubmit } = useForm({\n  initialValues: { email: \"\", password: \"\" },\n  validate: (formValues) => (formValues.email ? {} : { email: \"Required\" }),\n  onSubmit: async (formValues) => save(formValues),\n});\n```\n\n### useFetch\n\n```tsx\nimport { useFetch } from \"@axiora-ui/ui-hooks\";\n\nconst { data, error, loading, refetch } = useFetch<User>(\"/api/user\");\n```\n\n---\n\n## Build & test\n\n```bash\npnpm build --filter @axiora-ui/ui-hooks\npnpm test --filter @axiora-ui/ui-hooks\n```\n\nOutput: `dist/index.js` + `dist/index.d.ts` (React is externalized).\n\n---\n\n## Future hooks\n\nAdditional hooks not yet implemented: `useScrollPosition`, `useCopyToClipboard`, `useEventListener`, `useTimeout`, `useInterval`, and others.\n\nSee [IMPLEMENTATION_STATUS.md](../../IMPLEMENTATION_STATUS.md) for overall project progress.\n","readmeFilename":"README.md"}