Mantine Hooks
Hooks for state and UI management
Installation
Source
Package
Bundle size
License
State management hooks
use-debounced-value
Debounce value changes
use-form
Manage forms state, handles values and validation
use-interval
Wrapper around window.setInterval
use-local-storage-value
Use localStorage value as react state, sync state across opened tabs
use-queue
Add data to queue if current limit is exceeded
use-id
Generate memoized random id
use-list-state
Manage array state
UI and DOM hooks
use-color-scheme
Detect user system color scheme with window.matchMedia API
use-document-title
Set document.title to given string
use-clipboard
Wrapper around navigator.clipboard with feedback timeout
use-click-outside
Detect click and touch events outside of specified element
use-media-query
Subscribe to media queries with window.matchMedia
use-scroll-lock
Lock scroll at current position
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-reduced-motion
Detect if user prefers to reduce motion
use-focus-trap
Trap focus inside given node
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