plusxp/rooks

Essential hooks ⚓ to super charge your components!

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

Complete Documentation

List of all hooks

• use-boundingclientrect - A React Hooks package for boundingclientrect
• 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-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-document-event-listener - A react hook to an event listener to the document object
• use-did-update - componentDidUpdate hook for react
• 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-event-listener - Adds an event listener to window
• use-window-scroll-position - A React hook to get the scroll position of the 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

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>
  );
}

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 💻

This project follows the all-contributors specification. Contributions of any kind welcome!