@mantine/notifications improvements
Events based functions
Notifications system functions were migrated to
custom events,
they are no longer depend on context and can be called in any part of application.
Old way with useNotifications
hook will work until version 5.0 release.
@mantine/notifications
now exports the following functions:
showNotification
– adds given notification to notifications list or queue depending on current state and limitupdateNotification
– updates notification that was previously added to the state or queuehideNotification
– removes notification with given id from notifications state and queuecleanNotifications
– removes all notifications from notifications state and queuecleanNotificationsQueue
– removes all notifications from queue
Notifications customization
You can now use sx
, style
, className
, classNames
and styles
props to customize notification styles:
classNames prop on MantineProvider
Same as with styles
you can now add classes to all components with classNames
prop on MantineProvider.
This approach is useful when you want to styles components with utility based CSS libraries.
Mantine CSS variables
You can now set withCSSVariables
prop on MantineProvider to add
Mantine CSS variables from theme to :root
.
This option is useful when you want to use Mantine theme values with CSS/SCSS or css-in-js libraries that do not have Mantine theme context.
Then you will be able to use variables anywhere in your CSS:
sx array syntax
All components now support arrays in sx prop. It can be to simultaneously use sx
prop and add it from props:
Stack component
New Stack component is a replacement for Group with vertical direction:
FloatingTooltip component
New FloatingTooltip component:
Aside and Footer components
AppShell now supports Aside
and Footer
components,
they work the same way as Navbar
and Header
component but render content on the opposite side:
New features
Slider and RangeSlider components now support disabled state:
Other changes
- @mantine/spotlight now exports event based functions to open/close spotlight and perform other actions from anywhere in your application (not only in components)
- Button, Badge, ThemeIcon and Text components now support hex color values in
gradient
prop - Radio now supports setting transition duration and icon customization via props
- Slider and RangeSlider components now support
precision
prop - Menu, List and Grid components were migrated to context, associated components (
Menu.Item
,List.Item
,Grid.Col
, etc.) can now be wrapper with other components and fragments useLocalStorageValue
hook was renamed touseLocalStorage
(old hook is still exported from@mantine/hooks
)- AppShell no longer parses props of Navbar and Header components, AppShell positioning logic was migrated to context and CSS variables, Navbar and Header components can now be wrapped with other components
- NextLink component was added to
@mantine/next
package to simplify Next.js Link usage with Menu - Global component now supports array syntax for
styles