How to speed up your project development with readymade react hooks?
How to speed up your project development with readymade react hooks?

React Hooks

How to speed up your project development with readymade react hooks?

List of React Hooks That save your time during project development.

Rajdeep singh
FrontEnd web
Published in
4 min readApr 29


I recently found a fully featured rich React components library that provides many packages. I used many libraries as a frontend developer, for example, GitHub Primer, Radix UI, etc. But no one gives a tuff competition to Mantine Library. It is a mind-blowing library. It compiles everything in one library.

I never emerged when I first found The Mantine Library; it provided so much stuff. Mantine provides every modern tool and enhances its functionality.

But My favourite is the mantine hook library; it provides tons of readymade hooks for projects.

How to install the Mantine Hooks library?

The installation process is straightforward, like in another library. If you are only interested in hooks, run the following command in your existing project.

npm install @mantine/hooks
# or
yarn add @mantine/hooks
# or
pnpm add @mantine/hooks

Martine provides a separate installation page where you install selected packages according to your requirement.


some of the hooks maybe do not work. For example, theme toggle hook for that you need to install @mantine/core package also.

Hook lists

There are 55 hooks in different fields, for example, state management, UI and DOM manipulation, Utilities and Lifecycle.

With the help of to react hook, you can easily speed up your development process.

  1. use-counter: Create a counter component with an Increment and decrement button
  2. use-debounced-state: Debounce value changes in input
  3. use-debounced-value: Debounce value changes
  4. use-disclosure: Manage boolean( true, false ) state; it provides open, close and toggle functionality.
  5. use-id: use-id hook generates a random memoized id. It helps to bind input elements to labels.
  6. use-idle: Detect the user interaction with the current page.
  7. use-input-state: Manage input value with the state.
  8. use-interval: Handle window.setInterval functionality
  9. use-list-state: Manage multiple states of the list.
  10. use-local-storage: Handling localStorage across react app.
  11. use-pagination: Create a pagination functionality on the blog.
  12. use-previous: Get the previous value of a state.
  13. use-queue: Handling and managing data queue and state.
  14. use-set-state: useState wrapper to work with a state like in class components.
  15. use-timeout: Calls function after a given time
  16. use-toggle: toggle between given values
  17. use-uncontrolled: Manage the state of between controlled and uncontrolled components
  18. use-validated-state: Validate state and based on state value
  19. use-click-outside: Detect click and touch events outside of the specified elements.
  20. use-color-scheme: Detect user system colour scheme.
  21. use-element-size: Get element width and height and subscribe to changes.
  22. use-event-listener: Subscribe to events with a ref.
  23. use-focus-return: Capture the last focused element on the page, and it returns the focus element if a given condition is met.
  24. use-focus-trap: adding focus inside given nodes.
  25. use-focus-within: Detect if any element within has focus.
  26. use-fullscreen: Enter and exit fullscreen mode with a given element.
  27. use-hotkeys: Enabling keyboard command Listen on the document.
  28. use-hover: Detect if the mouse hovers over the given element
  29. use-intersection: Get information about the intersection of a given element with its scroll container
  30. use-media-query: handling media queries
  31. use-mouse: Get the mouse position relative to the viewport or given element.
  32. use-move: Handles move behaviour over any element, used to build custom sliders, colour pickers, etc.
  33. use-reduced-motion: Detect if the user prefers to reduce motion
  34. use-resize-observer: change the element size and position with ResizeObserver
  35. use-scroll-into-view: Scroll the given node or Id into view
  36. use-viewport-size: Get viewport width and height
  37. use-clipboard: use-clipboard hook provides an interface to work with navigator.clipboard
  38. use-document-title: Set document.title to given string
  39. use-document-visibility: Detect if the current tab is active or not.
  40. use-eye-dropper: Pick a colour from any pixel on the screen. (colour picker )
  41. use-favicon: Change favicon
  42. use-hash: Get and set hash value in url.
  43. use-headroom: Create headers that are hidden after the user scrolls past a given distance
  44. use-merged-ref: merge multiple refs into one dom node.
  45. use-network: Get the current connection status.
  46. use-os: Get user operating system information.
  47. use-page-leave: Call function when the mouse leaves the page.
  48. use-text-selection: Get the currently selected text on the page.
  49. use-window-event: Adds an event listener to the window on the component mount and removes it on unmount.
  50. use-window-scroll: scroll smoothly to a given position
  51. use-did-update: Call function in useEffect when value changes, but not when the component mounts
  52. use-force-update: Force component to render without state change
  53. use-isomorphic-effect: Switch between useEffect during SSR and useLayoutEffect after hydration.
  54. use-logger: Log given values to the console when the component renders
  55. use-shallow-effect: useEffect drop-in replacement with dependencies shallow comparison.


I use @mantine/hooks, not only with the @mantine/core package. But without installing other mantine package.

@mantine/hooks give me much flexibility; I did not need to write code to create a react hook, and I am not responsible for updating hook code.

Everything is maintained by the community and mantine team. The big news is that mantine provides a hook for every problem beginner and pro developers face during development.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the, Nextjs, frontend web, and Sign up for a free newsletter.

You can also check out awesome-next, a curated list of excellent Nextjs-based libraries that help build small and large-scale applications with next.js.



Rajdeep singh
FrontEnd web

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Author