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.

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.

Note

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

Online Demo

https://codesandbox.io/p/sandbox/mantine-hooks-d3sm55

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.

Conclusion

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 officialrajdeepsingh.dev, 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.