Trigger built in notifications

How can I show a notification using the built in notification snackbars? Is there any method I can use as a service without having to reimplement notification provider?
K
kapa.ai57d ago
Hi @❴𝖒𝖔𝖗❵. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can use the built-in notification providers in Refine to show notifications without having to reimplement the notification provider. Refine offers out-of-the-box support for several design systems and UI libraries such as Material UI, Ant Design, Mantine, and Chakra UI. To use a built-in notification provider, you need to import the notification provider and pass it as a prop to the Refine component. Here is an example of how to do this:
import { Refine } from "@refinedev/core";
import { notificationProvider } from "@refinedev/chakra";

const App = () => {
return (
<Refine
//...
notificationProvider={notificationProvider}
/>
);
};
import { Refine } from "@refinedev/core";
import { notificationProvider } from "@refinedev/chakra";

const App = () => {
return (
<Refine
//...
notificationProvider={notificationProvider}
/>
);
};
(Source: refine.dev (https://refine.dev/blog/react-toastify#notification-providers-in-refine)) To open and close notifications, you can use the useNotification hook. Here is an example:
import React from "react";
import { useNotification } from "@refinedev/core";
import { Button, Col, Row } from "antd";

export const HomePage: React.FC = () => {
const { open, close } = useNotification();
return (
<Row
gutter={[16, 16]}
style={{
justifyContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<Col>
<Button
type="primary"
onClick={() => {
open?.({
type: "success",
message: "Notification Title",
description:
"This is the content of the notification.",
key: "notification-key",
});
}}
>
Open Notification
</Button>
</Col>
<Col>
<Button
type="default"
onClick={() => {
close?.("notification-key");
}}
>
Close Notification
</Button>
</Col>
</Row>
);
};
import React from "react";
import { useNotification } from "@refinedev/core";
import { Button, Col, Row } from "antd";

export const HomePage: React.FC = () => {
const { open, close } = useNotification();
return (
<Row
gutter={[16, 16]}
style={{
justifyContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<Col>
<Button
type="primary"
onClick={() => {
open?.({
type: "success",
message: "Notification Title",
description:
"This is the content of the notification.",
key: "notification-key",
});
}}
>
Open Notification
</Button>
</Col>
<Col>
<Button
type="default"
onClick={() => {
close?.("notification-key");
}}
>
Close Notification
</Button>
</Col>
</Row>
);
};
(Source: refine.dev (https://refine.dev/docs/guides-concepts/notifications#built-in-notification-providers)) Please note that in most cases, you won't need to manually open and close notifications, as Refine typically manages notifications for you automatically. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai57d ago
<@245678638211661824> kapa.ai is still learning and improving, please let us know how it did by reacting below