Mantine Hooks

Hooks library with 20+ hooks to manage state and ui.

Package includes hooks that are used to build components in @mantine/ scoped packages. You can use these hooks in your applications with or without other @mantine/ packages.

Documentation

See full documentation on Mantine website

Installation

# With yarn
yarn add @mantine/hooks

# With npm
npm install @mantine/hooks

Included hooks

• use-click-outside – capture click and touch events from outside of given container
• use-clipboard – provides convenient interface to work with clipboard api
• use-color-scheme – detect system color scheme
• use-debounced-value – debounce value with useEffect
• use-document-title – set document.title property
• use-focus-trap – trap focus at given node
• use-form – bare minimum form state management
• use-id – ensure id for form controls binding
• use-idle - track period of inactivity or idle time
• use-list-state – hook for convenient array state management
• use-local-storage-value – use value from localStorage as react state, sync state across tabs
• use-media-query – execute and subscribe to window.matchMedia queries
• use-queue – add data to queue if given limit is exceeded
• use-reduced-motion – check if user prefers to reduce motion
• use-scroll-lock – lock document.body scroll at current position
• use-window-event – adds event listener to window object on component mount and removes it on unmount
• use-window-scroll – subscribe to window scroll and scroll smoothly to given position
• use-toggle – switch between two states
• use-uncontrolled – manage state of both controlled and uncontrolled components
• use-interval – wrapper around window.setInterval
• use-force-update – force component to render without state change
• use-did-update – call function in useEffect when value changes, but not when component mounts
• use-isomorphic-effect – switch between useEffect during SSR and useLayoutEffect after hydration
• use-hash – get and set hash value in url
• use-intersection – wrapper for IntersectionObserver API
• use-hotkeys – subscribe to multiple hotkeys with single hook
• use-move – handles move behavior over any element, build custom sliders, color pickers, etc.

Licence

All Mantine packages have MIT licence. All Mantine dependencies also have MIT licence.