{"_id":"@alexius.xz/react-use-test","name":"@alexius.xz/react-use-test","dist-tags":{"beta":"0.0.1","latest":"0.0.1"},"versions":{"0.0.1":{"name":"@alexius.xz/react-use-test","version":"0.0.1","description":"Collection of React Hooks","main":"lib/index.js","module":"esm/index.js","sideEffects":false,"types":"lib/index.d.ts","typings":"lib/index.d.ts","scripts":{"start":"yarn storybook","test":"jest --maxWorkers 2","test:ssr":"jest --maxWorkers 2 --config ./jest.config.node.ts","test:watch":"jest --watch","test:coverage":"jest --coverage","lint":"eslint \"{src,tests,stories}/**/*.{ts,tsx}\"","lint:fix":"yarn lint --fix","lint:types":"tsc --noEmit","build:cjs":"tsc","build:es":"tsc -m esNext --outDir esm","build":"yarn build:cjs && yarn build:es","clean":"rimraf lib storybook-static esm","storybook":"start-storybook -p 6008","storybook:build":"build-storybook","storybook:upload":"gh-pages -d storybook-static --git \"$(which git)\"","storybook:clean":"rimraf storybook-static","release":"semantic-release"},"husky":{"hooks":{"pre-commit":"lint-staged","pre-push":"yarn lint && yarn clean && yarn build && yarn test"}},"author":{"name":"@streamich"},"license":"Unlicense","repository":{"type":"git","url":"git+https://github.com/streamich/react-use.git"},"bugs":{"url":"https://github.com/streamich/react-use/issues"},"homepage":"https://github.com/streamich/react-use#readme","dependencies":{"@types/js-cookie":"^2.2.6","@xobotyi/scrollbar-width":"^1.9.5","copy-to-clipboard":"^3.3.1","fast-deep-equal":"^3.1.3","fast-shallow-equal":"^1.0.0","js-cookie":"^2.2.1","nano-css":"^5.6.2","react-universal-interface":"^0.6.2","resize-observer-polyfill":"^1.5.1","screenfull":"^5.1.0","set-harmonic-interval":"^1.0.1","throttle-debounce":"^3.0.1","ts-easing":"^0.2.0","tslib":"^2.1.0"},"peerDependencies":{"react":"*","react-dom":"*"},"devDependencies":{"@babel/core":"7.24.9","@babel/plugin-syntax-dynamic-import":"7.8.3","@babel/preset-env":"7.24.8","@babel/preset-react":"7.24.7","@babel/preset-typescript":"7.24.7","@semantic-release/changelog":"6.0.3","@semantic-release/git":"10.0.1","@semantic-release/npm":"12.0.1","@shopify/jest-dom-mocks":"2.11.7","@storybook/addon-actions":"6.4.9","@storybook/addon-knobs":"6.4.0","@storybook/addon-notes":"5.3.21","@storybook/addon-options":"5.3.21","@storybook/react":"6.4.9","@testing-library/react":"12.1.2","@testing-library/react-hooks":"7.0.2","@types/jest":"27.5.2","@types/react":"17.0.0","@typescript-eslint/eslint-plugin":"5.62.0","@typescript-eslint/parser":"5.62.0","babel-core":"6.26.3","babel-eslint":"10.1.0","babel-loader":"8.3.0","babel-plugin-dynamic-import-node":"2.3.3","eslint":"8.57.0","eslint-config-prettier":"8.10.0","eslint-config-react-app":"6.0.0","eslint-plugin-flowtype":"8.0.3","eslint-plugin-import":"2.29.1","eslint-plugin-jsx-a11y":"6.9.0","eslint-plugin-prettier":"4.2.1","eslint-plugin-react":"7.35.0","eslint-plugin-react-hooks":"4.6.0","fork-ts-checker-webpack-plugin":"6.5.3","gh-pages":"5.0.0","husky":"7.0.4","jest":"26.6.3","jest-localstorage-mock":"2.4.26","keyboardjs":"2.7.0","lint-staged":"12.5.0","markdown-loader":"6.0.0","prettier":"2.3.0","raf-stub":"3.0.0","react":"17.0.2","react-dom":"17.0.2","react-frame-component":"5.2.7","react-spring":"9.7.4","react-test-renderer":"17.0.2","rebound":"0.1.0","redux-logger":"3.0.6","redux-thunk":"2.4.2","rimraf":"3.0.2","rxjs":"7.8.1","semantic-release":"24.0.0","ts-jest":"26.5.6","ts-loader":"8.4.0","ts-node":"10.9.2","typescript":"4.1.5"},"config":{"commitizen":{"path":"git-cz"}},"release":{"branches":["master",{"name":"next","prerelease":"rc"}],"verifyConditions":["@semantic-release/changelog","@semantic-release/npm","@semantic-release/git"],"prepare":["@semantic-release/changelog","@semantic-release/npm","@semantic-release/git"]},"lint-staged":{"src/**/**/*.{ts,tsx}":["eslint --fix","git add"]},"volta":{"node":"14.21.3","yarn":"1.22.22"},"collective":{"type":"opencollective","url":"https://opencollective.com/react-use"},"_id":"@alexius.xz/react-use-test@0.0.1","gitHead":"ad33f76dfff7ddb041a9ef74b80656a94affaa80","_nodeVersion":"18.20.4","_npmVersion":"10.7.0","dist":{"integrity":"sha512-c4lsHOxo+LwsoPilaEt5oYDt3mZb5X9SNv+DCJJQqpEmQZAn1ydZnZzIYyW3AghmZV3yB58e52AotaVwpb5S5g==","shasum":"39e6a4b588ff1cc838735e8b6b47f485bab91d08","tarball":"https://registry.npmjs.org/@alexius.xz/react-use-test/-/react-use-test-0.0.1.tgz","fileCount":511,"unpackedSize":453855,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBH1X3j0t1wYk97SvT6SWHUwbCTnoWL+yWVBrJ1xjt12AiEA+oBuOQ3unYISVKtq7XJvJK58dwIpiAGkG12GELbVf3E="}]},"_npmUser":{"name":"alexius.xz","email":"alexius.xz@gmail.com"},"directories":{},"maintainers":[{"name":"alexius.xz","email":"alexius.xz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-use-test_0.0.1_1740077730910_0.2782385253211095"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-20T18:55:30.847Z","0.0.1":"2025-02-20T18:55:31.130Z","modified":"2025-02-20T18:55:31.346Z"},"maintainers":[{"name":"alexius.xz","email":"alexius.xz@gmail.com"}],"description":"Collection of React Hooks","homepage":"https://github.com/streamich/react-use#readme","repository":{"type":"git","url":"git+https://github.com/streamich/react-use.git"},"author":{"name":"@streamich"},"bugs":{"url":"https://github.com/streamich/react-use/issues"},"license":"Unlicense","readme":"
\n

\n
\n
\n 👍\n
\n react-use\n
\n
\n
\n
\n

\n \n
\n
\n \n \"npm\n \n \n \"CircleCI\n \n \n \"npm\n \n \n \"demos\"\n \n
\n Collection of essential React Hooks.\n Port of libreact.\n
\n Translations: 🇨🇳 汉语\n \n
\n
\n
\n
\n 
npm i react-use
\n
\n
\n
\n
\n
\n
\n\n- [**Sensors**](./docs/Sensors.md)\n - [`useBattery`](./docs/useBattery.md) — tracks device battery state. [![][img-demo]](https://codesandbox.io/s/qlvn662zww)\n - [`useGeolocation`](./docs/useGeolocation.md) — tracks geo location state of user's device. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usegeolocation--demo)\n - [`useHover` and `useHoverDirty`](./docs/useHover.md) — tracks mouse hover state of some element. [![][img-demo]](https://codesandbox.io/s/zpn583rvx)\n - [`useHash`](./docs/useHash.md) — tracks location hash value. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usehash--demo)\n - [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive.\n - [`useIntersection`](./docs/useIntersection.md) — tracks an HTML element's intersection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-useintersection--demo)\n - [`useKey`](./docs/useKey.md), [`useKeyPress`](./docs/useKeyPress.md), [`useKeyboardJs`](./docs/useKeyboardJs.md), and [`useKeyPressEvent`](./docs/useKeyPressEvent.md) — track keys. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usekeypressevent--demo)\n - [`useLocation`](./docs/useLocation.md) and [`useSearchParam`](./docs/useSearchParam.md) — tracks page navigation bar location state.\n - [`useLongPress`](./docs/useLongPress.md) — tracks long press gesture of some element.\n - [`useMedia`](./docs/useMedia.md) — tracks state of a CSS media query. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemedia--demo)\n - [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices.\n - [`useMotion`](./docs/useMotion.md) — tracks state of device's motion sensor.\n - [`useMouse` and `useMouseHovered`](./docs/useMouse.md) — tracks state of mouse position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs)\n - [`useMouseWheel`](./docs/useMouseWheel.md) — tracks deltaY of scrolled mouse wheel. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemousewheel--docs)\n - [`useNetworkState`](./docs/useNetworkState.md) — tracks the state of browser's network connection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usenetworkstate--demo)\n - [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation.\n - [`usePageLeave`](./docs/usePageLeave.md) — triggers when mouse leaves page boundaries.\n - [`useScratch`](./docs/useScratch.md) — tracks mouse click-and-scrub state.\n - [`useScroll`](./docs/useScroll.md) — tracks an HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs)\n - [`useScrolling`](./docs/useScrolling.md) — tracks whether HTML element is scrolling.\n - [`useStartTyping`](./docs/useStartTyping.md) — detects when user starts typing.\n - [`useWindowScroll`](./docs/useWindowScroll.md) — tracks `Window` scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs)\n - [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668)\n - [`useMeasure`](./docs/useMeasure.md) and [`useSize`](./docs/useSize.md) — tracks an HTML element's dimensions. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo)\n - [`createBreakpoint`](./docs/createBreakpoint.md) — tracks `innerWidth`\n - [`useScrollbarWidth`](./docs/useScrollbarWidth.md) — detects browser's native scrollbars width. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescrollbarwidth--demo)\n - [`usePinchZoom`](./docs/usePinchZoom.md) — tracks pointer events to detect pinch zoom in and out status. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usePinchZoom--demo)\n
\n
\n- [**UI**](./docs/UI.md)\n - [`useAudio`](./docs/useAudio.md) — plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/2o4lo6rqy)\n - [`useClickAway`](./docs/useClickAway.md) — triggers callback when user clicks outside target area.\n - [`useCss`](./docs/useCss.md) — dynamically adjusts CSS.\n - [`useDrop` and `useDropArea`](./docs/useDrop.md) — tracks file, link and copy-paste drops.\n - [`useFullscreen`](./docs/useFullscreen.md) — display an element or video full-screen. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usefullscreen--demo)\n - [`useSlider`](./docs/useSlider.md) — provides slide behavior over any HTML element. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-useslider--demo)\n - [`useSpeech`](./docs/useSpeech.md) — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)\n - [`useVibrate`](./docs/useVibrate.md) — provide physical feedback using the [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API). [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevibrate--demo)\n - [`useVideo`](./docs/useVideo.md) — plays video, tracks its state, and exposes playback controls. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo)\n
\n
\n- [**Animations**](./docs/Animations.md)\n - [`useRaf`](./docs/useRaf.md) — re-renders component on each `requestAnimationFrame`.\n - [`useInterval`](./docs/useInterval.md) and [`useHarmonicIntervalFn`](./docs/useHarmonicIntervalFn.md) — re-renders component on a set interval using `setInterval`.\n - [`useSpring`](./docs/useSpring.md) — interpolates number over time according to spring dynamics.\n - [`useTimeout`](./docs/useTimeout.md) — re-renders component after a timeout.\n - [`useTimeoutFn`](./docs/useTimeoutFn.md) — calls given function after a timeout. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/animation-usetimeoutfn--demo)\n - [`useTween`](./docs/useTween.md) — re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://codesandbox.io/s/52990wwzyl)\n - [`useUpdate`](./docs/useUpdate.md) — returns a callback, which re-renders component when called.\n
\n
\n- [**Side-effects**](./docs/Side-effects.md)\n - [`useAsync`](./docs/useAsync.md), [`useAsyncFn`](./docs/useAsyncFn.md), and [`useAsyncRetry`](./docs/useAsyncRetry.md) — resolves an `async` function.\n - [`useBeforeUnload`](./docs/useBeforeUnload.md) — shows browser alert when user try to reload or close the page.\n - [`useCookie`](./docs/useCookie.md) — provides way to read, update and delete a cookie. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usecookie--demo)\n - [`useCopyToClipboard`](./docs/useCopyToClipboard.md) — copies text to clipboard.\n - [`useDebounce`](./docs/useDebounce.md) — debounces a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usedebounce--demo)\n - [`useError`](./docs/useError.md) — error dispatcher. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-useerror--demo)\n - [`useFavicon`](./docs/useFavicon.md) — sets favicon of the page.\n - [`useLocalStorage`](./docs/useLocalStorage.md) — manages a value in `localStorage`.\n - [`useLockBodyScroll`](./docs/useLockBodyScroll.md) — lock scrolling of the body element.\n - [`useRafLoop`](./docs/useRafLoop.md) — calls given function inside the RAF loop.\n - [`useSessionStorage`](./docs/useSessionStorage.md) — manages a value in `sessionStorage`.\n - [`useThrottle` and `useThrottleFn`](./docs/useThrottle.md) — throttles a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usethrottle--demo)\n - [`useTitle`](./docs/useTitle.md) — sets title of the page.\n - [`usePermission`](./docs/usePermission.md) — query permission status for browser APIs.\n
\n
\n- [**Lifecycles**](./docs/Lifecycles.md)\n - [`useEffectOnce`](./docs/useEffectOnce.md) — a modified [`useEffect`](https://reactjs.org/docs/hooks-reference.html#useeffect) hook that only runs once.\n - [`useEvent`](./docs/useEvent.md) — subscribe to events.\n - [`useLifecycles`](./docs/useLifecycles.md) — calls `mount` and `unmount` callbacks.\n - [`useMountedState`](./docs/useMountedState.md) and [`useUnmountPromise`](./docs/useUnmountPromise.md) — track if component is mounted.\n - [`usePromise`](./docs/usePromise.md) — resolves promise only while component is mounted.\n - [`useLogger`](./docs/useLogger.md) — logs in console as component goes through life-cycles.\n - [`useMount`](./docs/useMount.md) — calls `mount` callbacks.\n - [`useUnmount`](./docs/useUnmount.md) — calls `unmount` callbacks.\n - [`useUpdateEffect`](./docs/useUpdateEffect.md) — run an `effect` only on updates.\n - [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) — `useLayoutEffect` that that works on server.\n - [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md), [`useShallowCompareEffect`](./docs/useShallowCompareEffect.md), and [`useCustomCompareEffect`](./docs/useCustomCompareEffect.md)\n
\n
\n- [**State**](./docs/State.md)\n - [`createMemo`](./docs/createMemo.md) — factory of memoized hooks.\n - [`createReducer`](./docs/createReducer.md) — factory of reducer hooks with custom middleware.\n - [`createReducerContext`](./docs/createReducerContext.md) and [`createStateContext`](./docs/createStateContext.md) — factory of hooks for a sharing state between components.\n - [`useDefault`](./docs/useDefault.md) — returns the default value when state is `null` or `undefined`.\n - [`useGetSet`](./docs/useGetSet.md) — returns state getter `get()` instead of raw state.\n - [`useGetSetState`](./docs/useGetSetState.md) — as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.\n - [`useLatest`](./docs/useLatest.md) — returns the latest state or props\n - [`usePrevious`](./docs/usePrevious.md) — returns the previous state or props. [![][img-demo]](https://codesandbox.io/s/fervent-galileo-krgx6)\n - [`usePreviousDistinct`](./docs/usePreviousDistinct.md) — like `usePrevious` but with a predicate to determine if `previous` should update.\n - [`useObservable`](./docs/useObservable.md) — tracks latest value of an `Observable`.\n - [`useRafState`](./docs/useRafState.md) — creates `setState` method which only updates after `requestAnimationFrame`. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userafstate--demo)\n - [`useSetState`](./docs/useSetState.md) — creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0)\n - [`useStateList`](./docs/useStateList.md) — circularly iterates over an array. [![][img-demo]](https://codesandbox.io/s/bold-dewdney-pjzkd)\n - [`useToggle` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean. [![][img-demo]](https://codesandbox.io/s/focused-sammet-brw2d)\n - [`useCounter` and `useNumber`](./docs/useCounter.md) — tracks state of a number. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usecounter--demo)\n - [`useList`](./docs/useList.md) ~and [`useUpsert`](./docs/useUpsert.md)~ — tracks state of an array. [![][img-demo]](https://codesandbox.io/s/wonderful-mahavira-1sm0w)\n - [`useMap`](./docs/useMap.md) — tracks state of an object. [![][img-demo]](https://codesandbox.io/s/quirky-dewdney-gi161)\n - [`useSet`](./docs/useSet.md) — tracks state of a Set. [![][img-demo]](https://codesandbox.io/s/bold-shtern-6jlgw)\n - [`useQueue`](./docs/useQueue.md) — implements simple queue.\n - [`useStateValidator`](./docs/useStateValidator.md) — tracks state of an object. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatevalidator--demo)\n - [`useStateWithHistory`](./docs/useStateWithHistory.md) — stores previous state values and provides handles to travel through them. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatewithhistory--demo)\n - [`useMultiStateValidator`](./docs/useMultiStateValidator.md) — alike the `useStateValidator`, but tracks multiple states at a time. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemultistatevalidator--demo)\n - [`useMediatedState`](./docs/useMediatedState.md) — like the regular `useState` but with mediation by custom function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemediatedstate--demo)\n - [`useFirstMountState`](./docs/useFirstMountState.md) — check if current render is first. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usefirstmountstate--demo)\n - [`useRendersCount`](./docs/useRendersCount.md) — count component renders. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userenderscount--demo)\n - [`createGlobalState`](./docs/createGlobalState.md) — cross component shared state.[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-createglobalstate--demo)\n - [`useMethods`](./docs/useMethods.md) — neat alternative to `useReducer`. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemethods--demo)\n
\n
\n- [**Miscellaneous**]()\n - [`useEnsuredForwardedRef`](./docs/useEnsuredForwardedRef.md) and [`ensuredForwardRef`](./docs/useEnsuredForwardedRef.md) — use a React.forwardedRef safely. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-useensuredforwardedref--demo)\n\n
\n
\n
\n
\n
\n
\n
\n\n

\n Usage — how to import.\n
\n Unlicense — public domain.\n
\n Support — add yourself to backer list below.\n

\n\n
\n
\n
\n
\n
\n\n[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg\n\n
\n

Contributors

\n
\n\n
\n
\n\n\n\n
\n
\n
\n
\n
\n","readmeFilename":"README.md"}