rooks

Complete Documentation

List of all hooks

• useBoundingclientrectRef - A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked.
• useBoundingclientrect - A React Hooks package for boundingclientrect
• useCountdown - Count down to a target timestamp and call callbacks every second (or provided peried)
• useCounter - A React Hooks package for counter
• useDebounce - Debounce hook for react
• useDidMount - A React hooks package for componentDidMount
• useDidUpdate - componentDidUpdate hook for react
• useDocumentEventListener - A react hook to an event listener to the document object
• useEffectOnceWhen - Runs a callback effect atmost one time when a condition becomes true
• useEventListenerRef - A react hook to add an event listener to a ref
• useForkRef - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
• useFreshRef - Avoid stale state in callbacks with this hook. Auto updates values using a ref.
• useFreshTick - Like useFreshRef but specifically for functions
• useFullscreen - A React Hooks package for fullscreen.
• useInViewRef - Simple hook that monitors element enters or leave the viewport.
• useGeolocation - A hook to provide the geolocation info on client side.
• useInput - A React Hooks package for input
• useIntersectionObserverRef - A hook to register an intersection observer listener
• useIntervalWhen - Sets an interval immediately when a condition is true
• useInterval - A react hook for using setInterval
• useIsomorphicEffect - Resolves to useEffect when window is not in scope and useLayout effect in the browser
• useKeyRef - Very similar to useKey but it returns a ref
• useKey - Keyboard key handler hook for react
• useKeys - A hook which allows to setup callbacks on multiple keypresses at the same time
• useLocalstorageState - UseState but auto updates values to localStorage
• useLocalstorage - Local Storage hook for React
• useMapState - A react hook to manage state in a key value pair map.
• useMergeRefs - Merges any number of refs into a single ref
• useMouse - A React Hooks package for mouse
• useMultiSelectableList - A custom hook to easily select multiple values from a list
• useMutationObserverRef - A hook that tracks mutations of an element. It returns a callbackRef.
• useMutationObserver - A React Hooks package for mutation-observer
• useNavigatorLanguage - A React Hooks package for navigator-language
• useOnWindowResize - A React hook for window on resize event
• useOnWindowScroll - A React hook for window on scroll event
• useOnline - A React Hooks package for online
• useOutsideClickRef - A hook that can track a click event outside a ref. Returns a callbackRef.
• useOutsideClick - React hook for tracking clicks outside a ref
• usePreviousDifferent - usePreviousDifferent hooks returns the last different value of a variable
• usePreviousImmediate - usePreviousImmediate returns the previous value of a variable even if it was the same or different
• usePrevious - Access the previous value of a variable with this React hook
• useQueueState - A React hook that manages state in the form of a queue
• useRaf - A continuously running requestAnimationFrame hook for React
• useSelect - A React Hooks package for select
• useSelectableList - Easily select a single value from a list of values. very useful for radio buttons, select inputs etc.
• useSessionstorageState - useState but syncs with sessionstorage
• useSessionstorage - Session storage react hook. Easily manage session storage values
• useStackState - A React hook that manages state in the form of a stack
• useThrottle - A throttle hook for react
• useTimeAgo - A React Hook to get time ago for timestamp millisecond value
• useTimeoutWhen - Takes a callback and fires it when a condition is true
• useTimeout - A React Hooks package for timeout
• useToggle - A React Hooks package for toggle
• useUndoState - Drop in replacement for useState hook but with undo functionality.
• useUpdateEffect - An useEffect that does not run on first render
• useVisibilitySensor - A React Hooks package for visibility-sensor
• useWillUnmount - A React hook for componentWillUnmount lifecycle method
• useWindowEventListener - Adds an event listener to window
• useWindowScrollPosition - A React hook to get the scroll position of the window
• useWindowSize - A React Hooks package for window-size
• useWorker - 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/useDidMount instead of rooks if you only need the useDidMount functionality.

Installation

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.