rooks

Complete Documentation

List of all hooks

• use-boundingclientrect-ref - A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked.
• use-boundingclientrect - A React Hooks package for boundingclientrect
• use-countdown - Count down to a target timestamp and call callbacks every second (or provided peried)
• use-counter - A React Hooks package for counter
• use-debounce - Debounce hook for react
• use-did-mount - A React hooks package for componentDidMount
• use-did-update - componentDidUpdate hook for react
• use-effect-once-when - Runs a callback effect atmost one time when a condition becomes true
• use-fork-ref - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
• use-fullscreen - A React Hooks package for fullscreen.
• use-geolocation - A hook to provide the geolocation info on client side.
• use-input - A React Hooks package for input
• use-intersection-observer-ref - A hook to register an intersection observer listener
• use-interval-when - Sets an interval immediately when a condition is true
• use-interval - A react hook for using setInterval
• use-key-ref - Very similar to useKey but it returns a ref
• use-key - Keyboard key handler hook for react
• use-keys - A hook which allows to setup callbacks on multiple keypresses at the same time
• use-localstorage-state - UseState but auto updates values to localStorage
• use-localstorage - Local Storage hook for React
• use-merge-refs - Merges any number of refs into a single ref
• use-mouse - A React Hooks package for mouse
• use-multi-selectable-list - A custom hook to easily select multiple values from a list
• use-mutation-observer-ref - A hook that tracks mutations of an element. It returns a callbackRef.
• use-mutation-observer - A React Hooks package for mutation-observer
• use-navigator-language - A React Hooks package for navigator-language
• use-on-window-resize - A React hook for window on resize event
• use-on-window-scroll - A React hook for window on scroll event
• use-online - A React Hooks package for online
• use-outside-click-ref - A hook that can track a click event outside a ref. Returns a callbackRef.
• use-outside-click - React hook for tracking clicks outside a ref
• use-previous - Access the previous value of a variable with this React hook
• use-raf - A continuously running requestAnimationFrame hook for React
• use-select - A React Hooks package for select
• use-selectable-list - Easily select a single value from a list of values. very useful for radio buttons, select inputs etc.
• use-sessionstorage-state - useState but syncs with sessionstorage
• use-sessionstorage - Session storage react hook. Easily manage session storage values
• use-throttle - A throttle hook for react
• use-time-ago - A React Hook to get time ago for timestamp millisecond value
• use-timeout-when - Takes a callback and fires it when a condition is true
• use-timeout - A React Hooks package for timeout
• use-toggle - A React Hooks package for toggle
• use-undo-state - Drop in replacement for useState hook but with undo functionality.
• use-visibility-sensor - A React Hooks package for visibility-sensor
• use-will-unmount - A React hook for componentWillUnmount lifecycle method
• use-window-size - A React Hooks package for window-size
• use-worker - A React Hooks package for worker

About

Standalone build for all rooks. This package contains all the hooks built as part of the rooks project.

Note: If you only need a few hooks from the rooks package, it's prefereable to install individiual hooks from npm instead of the standalone rooks build. In other words, install @rooks/use-did-mount instead of rooks if you only need the use-did-mount functionality.

Installation

For a specific hook like useDidMount

npm i -s @rooks/use-did-mount

npm i -s @rooks/use-interval

import useDidMount from "@rooks/use-did-mount";

For standalone build with all the hooks

npm i - s rooks

Import any hook from "rooks" and start using them!

import { useDidMount } from "rooks";

Usage

function App() {

useDidMount(() => {

alert("mounted");

});

return (

<div className="App">

<h1>Hello CodeSandbox</h1>

<h2>Start editing to see some magic happen!</h2>

</div>

);

}

License

MIT

Join Bhargav's discord server

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.