is there a sample notification component i could reuse

is there a sample notification component which i could reuse

14 Replies

Hi @natztheking. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, there are sample notification components that you can reuse. Refine provides a useNotification hook that you can use to open and close notifications. Here is an example of how you can use it:

import { useNotification } from "@refinedev/core";  
import { Button, Stack } from "@mui/material";  
  
const ExamplePage: React.FC = () => {  
 const { open, close } = useNotification();  
  
 return (  
 <Stack spacing={2} direction="row">  
 <Button  
 color="success"  
 variant="outlined"  
 size="small"  
 onClick={() =>  
 open?.({  
 type: "success",  
 message: "Success",  
 description: "Success description",  
 })  
 }  
 >  
 Success  
 </Button>  
 <Button  
 color="error"  
 variant="outlined"  
 size="small"  
 onClick={() =>  
 open?.({  
 type: "error",  
 message: "Error",  
 description: "Error description",  
 })  
 }  
 >  
 Error  
 </Button>  
  
 <Button  
 color="secondary"  
 variant="outlined"  
 size="small"  
 onClick={() =>  
 open?.({  
 type: "progress",  
 message: "Progress",  
 undoableTimeout: 5,  
 cancelMutation: () => {  
 alert("cancelMutation");  
 },  
 })  
 }  
 >  
 Progress  
 </Button>  
 </Stack>  
 );  
};

import { useNotification } from "@refinedev/core";  
import { Button, Stack } from "@mui/material";  
  
const ExamplePage: React.FC = () => {  
 const { open, close } = useNotification();  
  
 return (  
 <Stack spacing={2} direction="row">  
 <Button  
 color="success"  
 variant="outlined"  
 size="small"  
 onClick={() =>  
 open?.({  
 type: "success",  
 message: "Success",  
 description: "Success description",  
 })  
 }  
 >  
 Success  
 </Button>  
 <Button  
 color="error"  
 variant="outlined"  
 size="small"  
 onClick={() =>  
 open?.({  
 type: "error",  
 message: "Error",  
 description: "Error description",  
 })  
 }  
 >  
 Error  
 </Button>  
  
 <Button  
 color="secondary"  
 variant="outlined"  
 size="small"  
 onClick={() =>  
 open?.({  
 type: "progress",  
 message: "Progress",  
 undoableTimeout: 5,  
 cancelMutation: () => {  
 alert("cancelMutation");  
 },  
 })  
 }  
 >  
 Progress  
 </Button>  
 </Stack>  
 );  
};

In this example, three buttons are created: "Success", "Error", and "Progress". When each button is clicked, a notification of the corresponding type is opened. The open function from the useNotification hook is used to open the notifications, and it takes an object as an argument that specifies the type, message, and description of the notification. You can find more details about this in the Refine documentation (https://refine.dev/docs/notification/hooks/use-notification/basic-usage-live-preview). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@445580191104761857> kapa.ai is still learning and improving, please let us know how it did by reacting below

conscious-sapphire•5mo ago

i need an example on realtime notification @kapa.ai @kapa.ai i need an example on realtime notification

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Refine provides a realtime feature that allows you to subscribe to the changes in the data and update the UI accordingly. This feature can be used through the liveProvider prop of the <Refine> component. Here's an example of using Ably with Refine for realtime updates:

import { liveProvider, Ably } from "@refinedev/ably";  
  
const ablyClient = new Ably.Realtime("your-api-key");  
  
const App = () => {  
 return (  
 <Refine  
 liveProvider={liveProvider(ablyClient)}  
 options={{ liveMode: "auto" }}  
 /* ... */  
 >  
 {/* ... */}  
 </Refine>  
 );  
};

import { liveProvider, Ably } from "@refinedev/ably";  
  
const ablyClient = new Ably.Realtime("your-api-key");  
  
const App = () => {  
 return (  
 <Refine  
 liveProvider={liveProvider(ablyClient)}  
 options={{ liveMode: "auto" }}  
 /* ... */  
 >  
 {/* ... */}  
 </Refine>  
 );  
};

In this example, an Ably client is created and passed to the liveProvider function, which is then passed as a prop to the <Refine> component. The liveMode option is set to "auto", which means that the realtime feature will be enabled automatically. You can find more details about this in the Refine documentation (https://refine.dev/blog/react-admin-vs-refine#realtime). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@445580191104761857> kapa.ai is still learning and improving, please let us know how it did by reacting below

conscious-sapphire•5mo ago

@kapa.ai how to setup in already existing project

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To integrate Refine into an existing project, you need to install the @refinedev/core package and import the Refine component into your application. The Refine component provides the necessary context for all child components to work with Refine hooks and components. The only required prop for the Refine component is dataProvider. Here are the steps to set up Refine in an existing project: 1. Install the necessary packages. For demonstration purposes, we will also install the @refinedev/simple-rest package to use as a data provider. You can use one of the provided data providers or create your own.

npm i @refinedev/core @refinedev/simple-rest

npm i @refinedev/core @refinedev/simple-rest

pnpm add @refinedev/core @refinedev/simple-rest

pnpm add @refinedev/core @refinedev/simple-rest

yarn add @refinedev/core @refinedev/simple-rest

yarn add @refinedev/core @refinedev/simple-rest

2. Import the Refine component and the data provider into your application. Here's an example of how to do this in an App.tsx file:

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
  
const API_URL = "<https://api.fake-rest.refine.dev";>  
  
function App() {  
 return (  
 <ExistingProvider>  
 <Refine dataProvider={dataProvider(API_URL)}>  
 {/* You can use Refine hooks inside here */}  
 <ComponentWithRefineHooks />  
 <ExistingComponent1>  
 </Refine>  
 </ExistingProvider>  
 );  
}

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
  
const API_URL = "<https://api.fake-rest.refine.dev";>  
  
function App() {  
 return (  
 <ExistingProvider>  
 <Refine dataProvider={dataProvider(API_URL)}>  
 {/* You can use Refine hooks inside here */}  
 <ComponentWithRefineHooks />  
 <ExistingComponent1>  
 </Refine>  
 </ExistingProvider>  
 );  
}

In this example, the Refine component is wrapped around the existing components, and the dataProvider prop is set to the data provider imported from @refinedev/simple-rest. You can find more details about this in the Refine documentation (https://refine.dev/docs/guides-concepts/usage-with-existing-projects). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@445580191104761857> kapa.ai is still learning and improving, please let us know how it did by reacting below

conscious-sapphire•5mo ago

@kapa.ai live provider

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The liveProvider in Refine is used to add real-time support to your application. It allows you to update and show data in real-time throughout your app. You can use any real-time library or tool that you want with it. A liveProvider must have the following properties:

const liveProvider = {  
 subscribe: ({ channel, params: { ids }, types, callback }) => any,  
 unsubscribe: (subscription) => void,  
 publish?: (event) => void,  
};

const liveProvider = {  
 subscribe: ({ channel, params: { ids }, types, callback }) => any,  
 unsubscribe: (subscription) => void,  
 publish?: (event) => void,  
};

- subscribe: This method is used to subscribe to a channel. It returns a subscription object that can be used to unsubscribe. - unsubscribe: This method is used to unsubscribe from a subscription. - publish: This optional method is used to publish an event to the channel on the client side. When you send an event after the relevant operations on the server, Refine will invalidate the related queries. If the liveMode is manual, queries of related resources are not invalidated in real-time; instead onLiveEvent is run with the event as new events from the subscription arrive. Here's an example of how to use liveProvider in your application:

import { Refine } from "@refinedev/core";  
import { liveProvider } from "@refinedev/supabase";  
import { supabaseClient } from "./utility";  
  
function App() {  
 return (  
 <Refine  
 // ...  
 liveProvider={liveProvider(supabaseClient)}  
 />  
 );  
}

import { Refine } from "@refinedev/core";  
import { liveProvider } from "@refinedev/supabase";  
import { supabaseClient } from "./utility";  
  
function App() {  
 return (  
 <Refine  
 // ...  
 liveProvider={liveProvider(supabaseClient)}  
 />  
 );  
}

In this example, the liveProvider prop is passed in with the liveProvider() function from @refinedev/supabase. You can find more details about liveProvider in the Refine documentation (https://refine.dev/docs/realtime/live-provider/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@445580191104761857> kapa.ai is still learning and improving, please let us know how it did by reacting below

conscious-sapphire•5mo ago

@kapa.ai how to setup live provider

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To set up a liveProvider in Refine, you need to create a live provider and pass it to the Refine component. Here's an example of how to do this with Ably: 1. First, install the necessary packages:

npm install @refinedev/core ably

npm install @refinedev/core ably

2. Then, create your live provider. Here's an example of how to create a live provider with Ably:

import Ably from "ably/promises";

export const liveProvider = (ablyClient) => {
    return {
        subscribe: ({ channel, types, params, callback }) => {
            const ablyChannel = ablyClient.channels.get(channel);
            const listener = (msg) => {
                const { name, data } = msg;
                if (types.includes(name)) {
                    callback({
                        channel,
                        type: name,
                        date: new Date(),
                        payload: data,
                    });
                }
            };
            ablyChannel.subscribe(listener);
            return {
                unsubscribe: () => {
                    ablyChannel.unsubscribe(listener);
                },
            };
        },
    };
};

import Ably from "ably/promises";

export const liveProvider = (ablyClient) => {
    return {
        subscribe: ({ channel, types, params, callback }) => {
            const ablyChannel = ablyClient.channels.get(channel);
            const listener = (msg) => {
                const { name, data } = msg;
                if (types.includes(name)) {
                    callback({
                        channel,
                        type: name,
                        date: new Date(),
                        payload: data,
                    });
                }
            };
            ablyChannel.subscribe(listener);
            return {
                unsubscribe: () => {
                    ablyChannel.unsubscribe(listener);
                },
            };
        },
    };
};

3. Finally, use your live provider in your application:

import { Refine } from "@refinedev/core";  
import Ably from "ably/promises";  
import { liveProvider } from "./liveProvider";  
  
const ablyClient = new Ably.Realtime("your-ably-token");  
  
const App = () => {  
 return <Refine liveProvider={liveProvider(ablyClient)}>{/*...*/}</Refine>;  
};

import { Refine } from "@refinedev/core";  
import Ably from "ably/promises";  
import { liveProvider } from "./liveProvider";  
  
const ablyClient = new Ably.Realtime("your-ably-token");  
  
const App = () => {  
 return <Refine liveProvider={liveProvider(ablyClient)}>{/*...*/}</Refine>;  
};

In this example, an Ably client is created and passed to the liveProvider function, which is then passed as a prop to the Refine component. You can find more details about this in the Refine documentation (https://refine.dev/docs/guides-concepts/realtime#usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@445580191104761857> kapa.ai is still learning and improving, please let us know how it did by reacting below