基本的React自定义钩子为您的组件充电！_TypeScript_JavaScript_下载.zip

<br/> <br/> <p align="center"> <img src="https://cdn.discordapp.com/attachments/761126463457460234/775262278026788885/Final_Copy_8.png" height="auto" width="100%" /> </p> <br/> [](https://github.com/imbhargav5/rooks/actions/workflows/ci-release.yml)   [](#contributors)     [](https://rooks.vercel.app)  <br/> <br/> <br/> <h2 align="center">Essential React custom hooks ⚓ to super charge your components! </h2> <br/> <p align="center"> <a target="_blank" rel="noopener noreferrer" href="https://vercel.com?utm_source=rooks&utm_campaign=oss" > <img src=".github/powered-by-vercel.svg" /> </a> </p> <br/> **<h2 align="center">List of all hooks</h2>** <!--hookslist start--> **<h3 align="center">🔥 Effects</h3>** * [useAsyncEffect](https://rooks.vercel.app/docs/useAsyncEffect) - A version of useEffect that accepts an async function * [useDeepCompareEffect](https://rooks.vercel.app/docs/useDeepCompareEffect) - Deep compare dependencies instead of shallow for useEffect * [useDidMount](https://rooks.vercel.app/docs/useDidMount) - componentDidMount hook for React * [useDidUpdate](https://rooks.vercel.app/docs/useDidUpdate) - componentDidUpdate hook for react * [useDocumentTitle](https://rooks.vercel.app/docs/useDocumentTitle) - A hook to easily update document title with React * [useEffectOnceWhen](https://rooks.vercel.app/docs/useEffectOnceWhen) - Runs a callback effect atmost one time when a condition becomes true * [useIntervalWhen](https://rooks.vercel.app/docs/useIntervalWhen) - Sets an interval immediately when a condition is true * [useIsomorphicEffect](https://rooks.vercel.app/docs/useIsomorphicEffect) - A hook that resolves to useEffect on the server and useLayoutEffect on the client. * [useLifecycleLogger](https://rooks.vercel.app/docs/useLifecycleLogger) - A react hook that console logs parameters as component transitions through lifecycles. * [useLockBodyScroll](https://rooks.vercel.app/docs/useLockBodyScroll) - This hook locks the scroll of the body element when `isLocked` is set to `true`. * [useMouseMoveDelta](https://rooks.vercel.app/docs/useMouseMoveDelta) - Tracks delta of mouse move * [useMouseWheelDelta](https://rooks.vercel.app/docs/useMouseWheelDelta) - Tracks delta of mouse move * [useWillUnmount](https://rooks.vercel.app/docs/useWillUnmount) - componentWillUnmount lifecycle as hook for React. **<h3 align="center">🚀 Events</h3>** * [useDocumentEventListener](https://rooks.vercel.app/docs/useDocumentEventListener) - A react hook to an event listener to the document object * [useDocumentVisibilityState](https://rooks.vercel.app/docs/useDocumentVisibilityState) - Returns the visibility state of the document. * [useFocus](https://rooks.vercel.app/docs/useFocus) - Handles focus events for the immediate target element. * [useFocusWithin](https://rooks.vercel.app/docs/useFocusWithin) - Handles focus events for the target component. * [useIsDroppingFiles](https://rooks.vercel.app/docs/useIsDroppingFiles) - Check if any files are currently being dropped anywhere. Useful for highlighting drop areas. * [useOnClickRef](https://rooks.vercel.app/docs/useOnClickRef) - Callback on click/tap events * [useOnHoverRef](https://rooks.vercel.app/docs/useOnHoverRef) - On hover callback hook * [useOnLongHover](https://rooks.vercel.app/docs/useOnLongHover) - Fires a callback when an element is hovered for a while * [useOnLongPress](https://rooks.vercel.app/docs/useOnLongPress) - Fire a callback on long press * [useOnWindowResize](https://rooks.vercel.app/docs/useOnWindowResize) - A React hook for adding an event listener for window resize * [useOnWindowScroll](https://rooks.vercel.app/docs/useOnWindowScroll) - A React hook for adding an event listener for window scroll * [useOutsideClick](https://rooks.vercel.app/docs/useOutsideClick) - Outside click(for a ref) event as hook for React. * [useOutsideClickRef](https://rooks.vercel.app/docs/useOutsideClickRef) - A hook that can track a click event outside a ref. Returns a callbackRef. * [useWindowEventListener](https://rooks.vercel.app/docs/useWindowEventListener) - Adds an event listener to window **<h3 align="center">📝 Form</h3>** * [useFileDropRef](https://rooks.vercel.app/docs/useFileDropRef) - Drop files easily * [useInput](https://rooks.vercel.app/docs/useInput) - Input hook for React. **<h3 align="center">✨ Misc</h3>** * [useDebounce](https://rooks.vercel.app/docs/useDebounce) - Debounce hook for react * [useDebounceFn](https://rooks.vercel.app/docs/useDebounceFn) - Powerful debounce function hook for React * [useDebouncedValue](https://rooks.vercel.app/docs/useDebouncedValue) - Tracks another value and gets updated in a debounced way. * [useDimensionsRef](https://rooks.vercel.app/docs/useDimensionsRef) - Easily grab dimensions of an element with a ref using this hook * [useEventListenerRef](https://rooks.vercel.app/docs/useEventListenerRef) - A react hook to add an event listener to a ref * [useForkRef](https://rooks.vercel.app/docs/useForkRef) - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef * [useFreshCallback](https://rooks.vercel.app/docs/useFreshCallback) - Avoid stale closures and keep your callback fresh * [useFreshRef](https://rooks.vercel.app/docs/useFreshRef) - Avoid stale state in callbacks with this hook. Auto updates values using a ref. * [useFreshTick](https://rooks.vercel.app/docs/useFreshTick) - Like use-fresh-ref but specifically for functions * [useMergeRefs](https://rooks.vercel.app/docs/useMergeRefs) - Merges any number of refs into a single ref * [useOrientation](https://rooks.vercel.app/docs/useOrientation) - orientation hook for react * [useRefElement](https://rooks.vercel.app/docs/useRefElement) - Helps bridge gap between callback ref and state * [useRenderCount](https://rooks.vercel.app/docs/useRenderCount) - Get the render count of a component * [useSpeech](https://rooks.vercel.app/docs/useSpeech) - Speech synthesis hook for React * [useThrottle](https://rooks.vercel.app/docs/useThrottle) - Throttle custom hook for React * [useTimeoutWhen](https://rooks.vercel.app/docs/useTimeoutWhen) - Takes a callback and fires it when a condition is true * [useToggle](https://rooks.vercel.app/docs/useToggle) - Toggle (between booleans or custom data)hook for React. * [useVibrate](https://rooks.vercel.app/docs/useVibrate) - Vibration API hook for React **<h3 align="center">🚃 Navigator</h3>** * [useNavigatorLanguage](https://rooks.vercel.app/docs/useNavigatorLanguage) - Navigator Language hook for React. * [useOnline](https://rooks.vercel.app/docs/useOnline) - Online status hook for React. **<h3 align="center">❇️ State</h3>** * [useArrayState](https://rooks.vercel.app/docs/useArrayState) - Array state manager hook for React * [useCountdown](https://rooks.vercel.app/docs/useCountdown) - Count down to a target timestamp and call callbacks every second (or provided peried) * [useCounter](https://rooks.vercel.app/docs/useCounter) - Counter hook for React. * [useGetIsMounted](https://rooks.vercel.app/docs/useGetIsMounted) - Checks if a component is mounted or not at the time. Usef