{"_id":"@coderlzw/r-hooks","name":"@coderlzw/r-hooks","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@coderlzw/r-hooks","version":"1.0.0","description":"A collection of useful React hooks","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"lint":"eslint .","lint:check":"eslint --fix .","format":"prettier --write .","format:check":"prettier --check .","build":"tsup","prepare":"husky","commit":"git-cz","lint-staged":"lint-staged","release":"semantic-release --no-ci","release:ci":"semantic-release"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"keywords":["react","hooks","typescript"],"author":{"name":"coderlzw"},"license":"ISC","peerDependencies":{"react":">=16.8.0"},"devDependencies":{"@commitlint/cli":"^19.8.1","@commitlint/config-conventional":"^19.8.1","@eslint/js":"^9.26.0","@semantic-release/changelog":"^6.0.3","@semantic-release/git":"^10.0.1","@types/react":"^19.1.3","commitizen":"^4.3.1","cz-customizable":"^7.4.0","eslint":"^9.26.0","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^5.2.0","globals":"^16.1.0","husky":"^9.1.7","lint-staged":"^16.0.0","prettier":"3.5.3","react":"^19.1.0","semantic-release":"^24.2.3","tsup":"^8.4.0","typescript":"^5.8.3","typescript-eslint":"^8.32.0"},"packageManager":"pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39","_id":"@coderlzw/r-hooks@1.0.0","gitHead":"87aa6e7d6033a9289ce86562d1e89a82f7b7eeeb","_nodeVersion":"20.19.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-EoOoVwH+dDSMyyzOS/wqv7qAZOg8iixTGCX/OR9LSpRAaq2EO8QCjKbgVJn1Mj5skd6MZjU84Cjwvcf2sWyVCQ==","shasum":"0c8f2082abecb4bd01b2614ede6d8579f9b2fc5b","tarball":"https://registry.npmjs.org/@coderlzw/r-hooks/-/r-hooks-1.0.0.tgz","fileCount":8,"unpackedSize":131989,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF+1T62ZXoreDnDgzFxGnG9pgtT0Pf3yLrgzahNxkA8NAiAlTrZrPsdzm5U6tBDolXpc+kryI49Pa/y9TCNJowwXtQ=="}]},"_npmUser":{"name":"coderlzw","email":"314607329@qq.com"},"directories":{},"maintainers":[{"name":"coderlzw","email":"314607329@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/r-hooks_1.0.0_1747047210179_0.9519389457030989"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-12T10:53:30.115Z","1.0.0":"2025-05-12T10:53:30.356Z","modified":"2025-05-12T10:53:30.626Z"},"maintainers":[{"name":"coderlzw","email":"314607329@qq.com"}],"description":"A collection of useful React hooks","keywords":["react","hooks","typescript"],"author":{"name":"coderlzw"},"license":"ISC","readme":"# r-hooks\n\n[English](#english) | [中文](#chinese)\n\n<a name=\"english\"></a>\n# English\n\nA collection of useful React hooks for your daily development.\n\n## Installation\n\n```bash\n# Using npm\nnpm install r-hooks\n\n# Using yarn\nyarn add r-hooks\n\n# Using pnpm\npnpm add r-hooks\n```\n\n## Available Hooks\n\n### useTheme\nA hook for managing theme (dark/light/system) with persistence.\n\n```tsx\nimport { useTheme, ThemeProvider } from 'r-hooks';\n\nfunction App() {\n  const { theme, setTheme, resolvedTheme } = useTheme();\n  \n  return (\n    <div>\n      <button onClick={() => setTheme('dark')}>Dark</button>\n      <button onClick={() => setTheme('light')}>Light</button>\n      <button onClick={() => setTheme('system')}>System</button>\n    </div>\n  );\n}\n```\n\n### useResizeObserver\nA hook for observing element size changes.\n\n```tsx\nimport { useResizeObserver } from 'r-hooks';\n\nfunction Component() {\n  const [ref, size] = useResizeObserver();\n  \n  return (\n    <div ref={ref}>\n      Width: {size.width}, Height: {size.height}\n    </div>\n  );\n}\n```\n\n### useThrottle\nA hook for throttling function calls.\n\n```tsx\nimport { useThrottle } from 'r-hooks';\n\nfunction Component() {\n  const throttledFn = useThrottle(() => {\n    // Your function here\n  }, 1000);\n}\n```\n\n### useDebounce\nA hook for debouncing function calls.\n\n```tsx\nimport { useDebounce } from 'r-hooks';\n\nfunction Component() {\n  const debouncedFn = useDebounce(() => {\n    // Your function here\n  }, 1000);\n}\n```\n\n### useScroll\nA hook for tracking scroll position.\n\n```tsx\nimport { useScroll } from 'r-hooks';\n\nfunction Component() {\n  const { x, y, direction } = useScroll();\n  \n  return (\n    <div>\n      Scroll X: {x}, Y: {y}, Direction: {direction}\n    </div>\n  );\n}\n```\n\n### useMediaQuery\nA hook for responding to media queries.\n\n```tsx\nimport { useMediaQuery } from 'r-hooks';\n\nfunction Component() {\n  const isMobile = useMediaQuery('(max-width: 768px)');\n  \n  return isMobile ? <MobileView /> : <DesktopView />;\n}\n```\n\n### useQueryParams\nA hook for managing URL query parameters.\n\n```tsx\nimport { useQueryParams } from 'r-hooks';\n\nfunction Component() {\n  const [params, setParams] = useQueryParams();\n  \n  return (\n    <div>\n      <button onClick={() => setParams({ page: 2 })}>\n        Go to page 2\n      </button>\n    </div>\n  );\n}\n```\n\n### useAsync\nA hook for handling asynchronous operations.\n\n```tsx\nimport { useAsync } from 'r-hooks';\n\nfunction Component() {\n  const [execute, { data, loading, error }] = useAsync(async () => {\n    const response = await fetch('/api/data');\n    return response.json();\n  });\n  \n  return (\n    <div>\n      {loading && <div>Loading...</div>}\n      {error && <div>Error: {error.message}</div>}\n      {data && <div>Data: {JSON.stringify(data)}</div>}\n    </div>\n  );\n}\n```\n\n### useClickOutside\nA hook for detecting clicks outside an element.\n\n```tsx\nimport { useClickOutside } from 'r-hooks';\n\nfunction Component() {\n  const ref = useRef(null);\n  \n  useClickOutside(ref, () => {\n    // Handle click outside\n  });\n  \n  return <div ref={ref}>Click outside me</div>;\n}\n```\n\n### useWindowSize\nA hook for tracking window size.\n\n```tsx\nimport { useWindowSize } from 'r-hooks';\n\nfunction Component() {\n  const { width, height } = useWindowSize();\n  \n  return (\n    <div>\n      Window size: {width}x{height}\n    </div>\n  );\n}\n```\n\n### usePagination\nA hook for managing pagination state.\n\n```tsx\nimport { usePagination } from 'r-hooks';\n\nfunction Component() {\n  const {\n    pagination,\n    paginationState,\n    setPageIndex,\n    setPageSize,\n    nextPage,\n    prevPage,\n    hasNextPage,\n    hasPrevPage\n  } = usePagination({\n    initialPage: 1,\n    initialPageSize: 10,\n    total: 100\n  });\n  \n  return (\n    <div>\n      <button onClick={prevPage} disabled={!hasPrevPage}>Previous</button>\n      <span>Page {pagination.pageIndex}</span>\n      <button onClick={nextPage} disabled={!hasNextPage}>Next</button>\n    </div>\n  );\n}\n```\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Start development\npnpm dev\n\n# Build\npnpm build\n\n# Lint\npnpm lint\n```\n\n## License\n\nISC © coderlzw","readmeFilename":"README.md","_rev":"1-d193c78a5ce559540f1b9dfee9cb7633"}