useNotification is a React hook that provides access to the notification system in Refine. It allows you to display success, error, and progress notifications to your users.
Usage
import { useNotification } from "@refinedev/core";
const MyComponent = () => {
const { open, close } = useNotification();
const handleClick = () => {
open?.({
type: "success",
message: "Success",
description: "Operation completed successfully",
});
};
return <button onClick={handleClick}>Show Notification</button>;
};
Return Values
The hook returns an object with the following properties:
Function to open/display a notification.
Function to close a specific notification by its key.
Examples
Basic Notification
import { useNotification } from "@refinedev/core";
const MyComponent = () => {
const { open } = useNotification();
const showSuccess = () => {
open?.({
type: "success",
message: "Success",
description: "Your changes have been saved",
});
};
return <button onClick={showSuccess}>Save</button>;
};
Error Notification
import { useNotification } from "@refinedev/core";
const MyComponent = () => {
const { open } = useNotification();
const showError = () => {
open?.({
type: "error",
message: "Error",
description: "Something went wrong. Please try again.",
});
};
return <button onClick={showError}>Trigger Error</button>;
};
Closeable Notification
import { useNotification } from "@refinedev/core";
const MyComponent = () => {
const { open, close } = useNotification();
const showNotification = () => {
open?.({
key: "unique-notification",
type: "progress",
message: "Processing",
description: "Your request is being processed...",
});
// Close after 3 seconds
setTimeout(() => {
close?.("unique-notification");
}, 3000);
};
return <button onClick={showNotification}>Start Process</button>;
};
API Reference
Type definitions from source code:
export type OpenNotificationParams = {
key?: string;
message: string;
type: "success" | "error" | "progress";
description?: string;
cancelMutation?: () => void;
undoableTimeout?: number;
};
export interface INotificationContext {
open?: (params: OpenNotificationParams) => void;
close?: (key: string) => void;
}
The notification system requires a notificationProvider to be configured in your <Refine> component. The appearance and behavior of notifications depend on your chosen notification provider implementation.