rooks
    TypeScript icon, indicating that this package has built-in type declarations

    5.7.1 • Public • Published



    Build Status Release script GitHub GitHub release (latest by date) GitHub contributors npm npm bundle size Codecov branch node-lts Website Module


    Essential React custom hooks to super charge your components!

    Complete Documentation

    Image from Gyazo

    List of all hooks

    • useBoundingclientrect - getBoundingClientRect hook for React.
    • useBoundingclientrectRef - A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked.
    • useCountdown - Count down to a target timestamp and call callbacks every second (or provided peried)
    • useCounter - Counter hook for React.
    • useDebounce - Debounce hook for react
    • useDidMount - componentDidMount hook for React
    • useDidUpdate - componentDidUpdate hook for react
    • useDimensionsRef - Easily grab dimensions of an element with a ref using this hook
    • 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 use-fresh-ref but specifically for functions
    • useFullscreen - Use full screen api for making beautiful and emersive experinces.
    • useGeolocation - A hook to provide the geolocation info on client side.
    • useInViewRef - Simple hook that monitors element enters or leave the viewport that's using Intersection Observer API.
    • useInput - Input hook for React.
    • useIntersectionObserverRef - A hook to register an intersection observer listener.
    • useInterval - setInterval hook for React.
    • useIntervalWhen - Sets an interval immediately when a condition is true
    • useIsomorphicEffect - A hook that resolves to useEffect on the server and useLayoutEffect on the client.
    • useKey - keypress, keyup and keydown event handlers as hooks for react.
    • useKeyBindings - useKeyBindings can bind multiple keys to multiple callbacks and fire the callbacks on key press.
    • useKeyRef - Very similar useKey but it returns a ref
    • useKeys - A hook which allows to setup callbacks when a combination of keys are pressed at the same time.
    • useLifecycleLogger - A react hook that console logs parameters as component transitions through lifecycles.
    • useLocalstorage - Localstorage hook for React. Syncs with localstorage values across components and browser windows automatically. Sets and retrieves a key from localStorage and subscribes to it for updates across windows.
    • useLocalstorageState - UseState but auto updates values to localStorage
    • useMapState - A react hook to manage state in a key value pair map.
    • useMediaMatch - Signal whether or not a media query is currently matched.
    • useMergeRefs - Merges any number of refs into a single ref
    • useMouse - Mouse position hook for React.
    • useMultiSelectableList - A custom hook to easily select multiple values from a list
    • useMutationObserver - Mutation Observer hook for React.
    • useMutationObserverRef - A hook that tracks mutations of an element. It returns a callbackRef.
    • useNavigatorLanguage - Navigator Language hook for React.
    • useOnWindowResize - A React hook for adding an event listener for window resize
    • useOnWindowScroll - A React hook for adding an event listener for window scroll
    • useOnline - Online status hook for React.
    • useOutsideClick - Outside click(for a ref) event as hook for React.
    • useOutsideClickRef - A hook that can track a click event outside a ref. Returns a callbackRef.
    • usePrevious - Access the previous value of a variable with this React hook
    • usePreviousDifferent - usePreviousDifferent 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
    • useQueueState - A React hook that manages state in the form of a queue
    • useRaf - A continuously running requestAnimationFrame hook for React
    • useSelect - Select values from a list easily. List selection hook for react.
    • useSelectableList - Easily select a single value from a list of values. very useful for radio buttons, select inputs etc.
    • useSessionstorage - Session storage react hook. Easily manage session storage values.
    • useSessionstorageState - useState but syncs with sessionstorage
    • useStackState - A React hook that manages state in the form of a stack
    • useThrottle - Throttle custom hook for React
    • useTimeout - setTimeout hook for react.
    • useTimeoutWhen - Takes a callback and fires it when a condition is true
    • useToggle - Toggle (between booleans or custom data)hook for React.
    • useUndoState - Drop in replacement for useState hook but with undo functionality.
    • useUpdateEffect - An useEffect that does not run on first render
    • useVisibilitySensor - Visibility sensor hook for React.
    • useWillUnmount - componentWillUnmount lifecycle as hook for React.
    • useWindowEventListener - Adds an event listener to window
    • useWindowScrollPosition - A React hook to get the scroll position of the window
    • useWindowSize - Window size hook for React.

    Features

    Collection of 63 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!

    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

    All Contributors

    Thanks goes to these wonderful people (emoji key):


    Bhargav Ponnapalli

    💻 🚧

    anil kumar chaudhary

    💻

    Qiwei Yang

    💻 🚧

    maciek_grzybek

    💻

    Harsh Zalavadiya

    💻

    B V K MAHIJENDRA

    💻

    Braxton Christensen

    💻

    Hansel

    💻

    Harshil Parmar

    💻

    Lionel

    💻

    Max Stoiber

    💻

    Michael Moore

    💻

    Rajas Paranjpe

    💻

    Mahendra Choudhary

    💻

    Nghia Pham

    💻

    Akshay Kadam (A2K)

    💻

    Alex Golubtsov

    💻

    Arman

    💻

    Branden Visser

    💻

    Brian Steere

    💻

    Cal Courtney

    💻

    Chris Milson

    💻

    Cong Zhang

    💻

    Daniel Holmes

    💻

    Fernando Beck

    💻

    Josh Davenport

    💻

    MARCEL

    💻

    Neilor Caldeira

    💻

    Tobias Lins

    💻

    Tsvetan

    💻

    Wei Zhu

    💻

    Yakko Majuri

    💻

    Frank Hellwig

    💻

    Austin Peterson

    💻

    thodubois

    💻

    wes christiansen

    💻

    CJ Patoilo

    💻

    mar1u50

    💻

    Install

    npm i rooks

    DownloadsWeekly Downloads

    9,776

    Version

    5.7.1

    License

    MIT

    Unpacked Size

    798 kB

    Total Files

    302

    Last publish

    Collaborators

    • imbhargav5