Version 2.2.0

New components and hooks

New MultiSelect component allows you to create searchable select with option to customize labels and options:

Which countries you visited last year?

United States

Germany

use-idle hook allows to detect if user does nothing:

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.:

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