Rooks

Essential React custom hooks to super charge your components!

React Hook

imbhargav5/rooks rooks.vercel.app rooks

README

A super awesome collection of regularly used custom hooks as utils for React.

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-document-event-listener - A react hook to an event listener to the document object

use-effect-once-when - Runs a callback effect atmost one time when a condition becomes true

use-event-listener-ref - A react hook to add an event listener to a ref

use-fresh-ref - Avoid stale state in callbacks with this hook. Auto updates values using a ref.

use-fork-ref - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef

use-fresh-tick - Like use-fresh-ref but specifically for functions

use-fullscreen - A React Hooks package for fullscreen.

use-geolocation - A hook to provide the geolocation info on client side.

use-in-view-ref - Simple hook that monitors element enters or leave the viewport.

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-isomorphic-effect - Resolves to useEffect when window is not in scope and useLayout effect in the browser

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-map-state - A react hook to manage state in a key value pair map.

use-media-match - Signal whether or not a media query is currently matched.

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-different - usePreviousDifferent hooks returns the last different value of a variable

use-previous-immediate - usePreviousImmediate returns the previous value of a variable even if it was the same or different

use-previous - Access the previous value of a variable with this React hook

use-queue-state - A React hook that manages state in the form of a queue

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-stack-state - A React hook that manages state in the form of a stack

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-update-effect - An useEffect that does not run on first render

use-visibility-sensor - A React Hooks package for visibility-sensor

use-will-unmount - A React hook for componentWillUnmount lifecycle method

use-window-scroll-position - A React hook to get the scroll position of the window

use-window-event-listener - Adds an event listener to window

use-window-size - A React Hooks package for window-size

use-worker - A React Hooks package for worker

Features

✅ Collection of 62 hooks as standalone modules.

✅ Standalone package with all the hooks at one place

✅ CommonJS, UMD and ESM Support

Installation

npm i -s rooks

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

``` js
import { useDidMount } from "rooks";
```

Usage

``` js
function App() {
useDidMount(() => {
alert("mounted");
});
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
```

Standalone Package

Package containing all the hooks is over here. - Docs and Npm Install

License

MIT

Contributors

Thanks goes to these wonderful people (emoji key):

_{Bhargav Ponnapalli} 💻 🤔 🎨 📖 🐛	_Tsvetan 💻	_{Wei Zhu} 💻	_{Akshay Kadam (A2K)} 💻	_{Austin Peterson} 💻	_{Frank Hellwig} 💻	_{Neilor Caldeira} 💻
_{Cong Zhang} 💻	_{Brian Steere} 💻	_{anil kumar chaudhary} 💻	_{Harsh Zalavadiya} 💻	_{maciek_grzybek} 💻	_{CT Wu} 💻 🤔	_{Braxton Christensen} 💻
_Lionel 💻	_{Max Stoiber} 💻	_Stupid 💻	_{Michael Moore} 💻	_Arman 💻	_zeritte 💻	_{Cal Courtney} 💻
_{wes christiansen} 💻	_{Daniel Holmes} 💻	_{Adrien Lemaire} 💻	_{Harshil Parmar} 💻	_{Yakko Majuri} 💻	_{Branden Visser} 💻	_thodubois 💻