showNotification is not there anymore

I am using the latest version "@mantine/notifications": "^5.10.4", but the example for notifications isn't working because showNotification doesn't exist. Do you know what may be the problem?

import React from 'react'; import { Group, Button } from '@mantine/core'; import { useNotifications } from '@mantine/notifications'; function Demo() { const notifications = useNotifications(); return ( <Group position="center"> <Button variant="outline" onClick={() => notifications.showNotification({ title: 'Default notification', message: 'Hey there, your code is awesome! 🤥', }) } > Show notification </Button> </Group> ); } 

2 Answers

First look at versions @mantine/core and @mantine/notifications are the same.

Did you call <Notification /> tag on your root file ( like this

import { MantineProvider } from '@mantine/core'; import { Notifications } from '@mantine/notifications'; function Demo() { return ( <MantineProvider withNormalizeCSS withGlobalStyles> <Notifications /> <App /> </MantineProvider> ); } 

for more information you can look this doc.

You should not be using the useNotifications hook to send your message, but rather import the shownotification function from the @mantine/notifications package and use it directly in your code. Your code should be rewritten like this:

import React from 'react'; import { Group, Button } from '@mantine/core'; import { showNotification } from '@mantine/notifications'; function Demo() { return ( <Group position="center"> <Button variant="outline" onClick={() => showNotification({ title: 'Default notification', message: 'Hey there, your code is awesome! 🤥', }) } > Show notification </Button> </Group> ); }