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

    7.4.3 • Public • Published



    CI and Semantic Release 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!



    List of all hooks

    🔥 Effects

    • useAsyncEffect - A version of useEffect that accepts an async function
    • useDidMount - componentDidMount hook for React
    • useDidUpdate - componentDidUpdate hook for react
    • useEffectOnceWhen - Runs a callback effect atmost one time when a condition becomes true
    • 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.
    • useLifecycleLogger - A react hook that console logs parameters as component transitions through lifecycles.
    • useWillUnmount - componentWillUnmount lifecycle as hook for React.

    🚀 Events

    📝 Form

    Misc

    • useDebounce - Debounce hook for react
    • useDebouncedValue - Tracks another value and gets updated in a debounced way.
    • useDimensionsRef - Easily grab dimensions of an element with a ref using this hook
    • 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
    • useMergeRefs - Merges any number of refs into a single ref
    • useRefElement - Helps bridge gap between callback ref and state
    • useRenderCount - Get the render count of a component
    • useThrottle - Throttle custom 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.

    🚃 Navigator

    ❇️ State

    • useArrayState - Array state manager hook for React
    • useCountdown - Count down to a target timestamp and call callbacks every second (or provided peried)
    • useCounter - Counter hook for React.
    • useGetIsMounted - Checks if a component is mounted or not at the time. Useful for async effects
    • useLocalstorageState - UseState but auto updates values to localStorage
    • useMapState - A react hook to manage state in a key value pair map.
    • useMultiSelectableList - A custom hook to easily select multiple values from a list
    • 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
    • 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.
    • useSessionstorageState - useState but syncs with sessionstorage
    • useSetState - Manage the state of a Set in React.
    • useStackState - A React hook that manages state in the form of a stack
    • useTimeTravelState - A hook that manages state which can undo and redo. A more powerful version of useUndoState hook.
    • useUndoState - Drop in replacement for useState hook but with undo functionality.

    ⚛️ UI

    • 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.
    • 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.
    • useIntersectionObserverRef - A hook to register an intersection observer listener.
    • 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.
    • useMediaMatch - Signal whether or not a media query is currently matched.
    • useMouse - Mouse position hook for React.
    • useMutationObserver - Mutation Observer hook for React.
    • useMutationObserverRef - A hook that tracks mutations of an element. It returns a callbackRef.
    • useRaf - A continuously running requestAnimationFrame hook for React
    • useResizeObserverRef - Resize Observer hook for React.
    • useWindowScrollPosition - A React hook to get the scroll position of the window
    • useWindowSize - Window size hook for React.


    Features

    Collection of 68 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

    💻

    Ayushman Gupta

    💻

    Rafael Ferreira

    💻

    Kristinn Thor Johannsson

    💻

    Michael Moore

    💻

    Trevor Blades

    💻

    official_dulin

    💻

    Billy Mosis Priambodo

    💻

    Stafford Williams

    💻

    Chanhee Kim

    💻

    Hooriza

    💻

    Nils Wittler

    💻

    Sebastian Szczepański

    💻

    Mahendra Choudhary

    💻

    Som Shekhar Mukherjee

    💻

    Qiushi Pan

    💻

    Jishnu Viswanath

    💻

    brahambence

    💻

    dependabot[bot]

    💻

    renovate[bot]

    💻

    dependabot-preview[bot]

    💻

    github-actions[bot]

    💻

    allcontributors[bot]

    💻

    zhangenming

    💻

    Antoni Kiszka

    💻

    Greg Poole

    💻

    Install

    npm i rooks

    DownloadsWeekly Downloads

    55,259

    Version

    7.4.3

    License

    MIT

    Unpacked Size

    373 kB

    Total Files

    153

    Last publish

    Collaborators

    • imbhargav5