Mantine Hooks
Hooks for state and UI management
Source
Package
Bundle size
License
Installation
Package depends on react and react-dom.
Install with npm:
npm install @mantine/hooks
Install with yarn:
yarn add @mantine/hooks
Hooks by category
State management
use-debounced-value
Debounce value changes
use-form
Manage forms state, handles values and validation
use-id
Generate memoized random id
use-idle
Detect if user does nothing on page
use-interval
Wrapper around window.setInterval
use-list-state
Manage array state
use-local-storage-value
Use localStorage value as react state, sync state across opened tabs
use-pagination
Manage pagination state
use-queue
Add data to queue if current limit is exceeded
use-toggle
Switch between two states
use-uncontrolled
Manage state of both controlled and uncontrolled components
UI and Dom
use-click-outside
Detect click and touch events outside of specified element
use-color-scheme
Detect user system color scheme with window.matchMedia API
use-focus-return
Capture last focused element on the page and return focus to it once condition is met
use-focus-trap
Trap focus inside given node
use-fullscreen
Enter/exit fullscreen with given element
use-hotkeys
Listen for keys combinations on document element
use-intersection
Get information about intersection of given element with its scroll container
use-media-query
Subscribe to media queries with window.matchMedia
use-move
Handles move behavior over any element, use to build custom sliders, color pickers, etc.
use-reduced-motion
Detect if user prefers to reduce motion
use-scroll-lock
Lock scroll at current position
Utilities
use-clipboard
Wrapper around navigator.clipboard with feedback timeout
use-document-title
Set document.title to given string
use-hash
Get and set hash value in url
use-merged-ref
Use multiple refs for one dom node
use-window-event
Adds event listener to window on component mount and removes it on unmount
use-window-scroll
Subscribe to window scroll and scroll smoothly to given position
Lifecycle
use-did-update
Call function in useEffect when value changes, but not when 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 console when component renders
use-shallow-effect
useEffect drop in replacement with dependencies shallow comparison
Browser support
All hooks are tested to work in all major modern browsers. Some hooks depend on web APIs that may not be supported by old browsers:
- use-media-query, use-color-scheme and use-reduced-motion hooks rely on window.matchMedia API
- use-clipboard hook uses Navigator.clipboard API
Built by Vitaly Rtishchev and these awesome people