New components and hooks
New MultiSelect component allows you to create searchable select with option to customize labels and options:
use-idle hook allows to detect if user does nothing:
Current state: idle
use-fullscreenuse-fullscreen hook allows to work with Fullscreen API:
New use-move hook handles move behavior over any element, you can use it to build custom sliders, color pickers, etc.:
Values
{ x: 20, y: 60 }Other changes
- Menu and RadioGroup components now works differently with Styles API – all styles and classNames should be added to root Menu/RadioGroup component instead of MenuItem/Radio
- Card component no longer has context styles for images and dividers, use new CardSection component instead
- @mantine/tag-picker package is deprecated – use MultiSelect instead
- You can now customize shadow and padding in Modal component
- Button now supports compact option which reduces its height and horizontal padding
- Image now supports adding figcaption
- New Mark component – mark tag with theme styles
- Menu component now supports labels in menu body and behavior customization (focus trap and close on scroll)
- 4 new premade pop-* transitions were added to Transition component
- New use-logger hook will log given values each time component renders
- Select, NativeSelect and Autocomplete components now support data as an array of strings
- New use-shallow-effect hook – a drop in replacement for useEffect with shallow comparison instead of referential
- use-scroll-lock hook now support state managing inside hook