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
yarn add @mantine/hooks
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
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.
- use-counter: Create a counter component with an Increment and decrement button
- use-debounced-state: Debounce value changes in input
- use-debounced-value: Debounce value changes
- use-disclosure: Manage boolean( true, false ) state; it provides open, close and toggle functionality.
use-idhook generates a random memoized id. It helps to bind input elements to labels.
- use-idle: Detect the user interaction with the current page.
- use-input-state: Manage input value with the state.
- use-interval: Handle window.setInterval functionality
- use-list-state: Manage multiple states of the list.
- use-local-storage: Handling localStorage across react app.
- use-pagination: Create a pagination functionality on the blog.
- use-previous: Get the previous value of a state.
- use-queue: Handling and managing data queue and state.
- use-set-state: useState wrapper to work with a state like in class components.
- use-timeout: Calls function after a given time
- use-toggle: toggle between given values
- use-uncontrolled: Manage the state of between controlled and uncontrolled components
- use-validated-state: Validate state and based on state value
- use-click-outside: Detect click and touch events outside of the specified elements.
- use-color-scheme: Detect user system colour scheme.
- use-element-size: Get element width and height and subscribe to changes.
- use-event-listener: Subscribe to events with a ref.
- use-focus-return: Capture the last focused element on the page, and it returns the focus element if a given condition is met.
- use-focus-trap: adding focus inside given nodes.
- use-focus-within: Detect if any element within has focus.
- use-fullscreen: Enter and exit fullscreen mode with a given element.
- use-hotkeys: Enabling keyboard command Listen on the document.
- use-hover: Detect if the mouse hovers over the given element
- use-intersection: Get information about the intersection of a given element with its scroll container
- use-media-query: handling media queries
- use-mouse: Get the mouse position relative to the viewport or given element.
- use-move: Handles move behaviour over any element, used to build custom sliders, colour pickers, etc.
- use-reduced-motion: Detect if the user prefers to reduce motion
- use-resize-observer: change the element size and position with ResizeObserver
- use-scroll-into-view: Scroll the given node or Id into view
- use-viewport-size: Get viewport width and height
- use-clipboard: use-clipboard hook provides an interface to work with
- use-document-title: Set
document.titleto given string
- use-document-visibility: Detect if the current tab is active or not.
- use-eye-dropper: Pick a colour from any pixel on the screen. (colour picker )
- use-favicon: Change favicon
- use-hash: Get and set hash value in url.
- use-headroom: Create headers that are hidden after the user scrolls past a given distance
- use-merged-ref: merge multiple refs into one dom node.
- use-network: Get the current connection status.
- use-os: Get user operating system information.
- use-page-leave: Call function when the mouse leaves the page.
- use-text-selection: Get the currently selected text on the page.
- use-window-event: Adds an event listener to the window on the component mount and removes it on unmount.
- use-window-scroll: scroll smoothly to a given position
- use-did-update: Call function in useEffect when value changes, but not when the component mounts
- use-force-update: Force component to render without state change
- use-isomorphic-effect: Switch between useEffect during SSR and useLayoutEffect after hydration.
- use-logger: Log given values to the console when the component renders
- 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 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.