Notifications

i need change the styles in the notifications, but i can find how can i do it in the docs, someone can help me?

3 Replies

Hi @mauryo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the styles of notifications in Refine, you can customize the notification providers. Refine supports multiple UI frameworks, including Ant Design, Material UI, Mantine, and Chakra UI. Below are some steps and examples to help you customize the notification styles. Using Ant Design If you are using Ant Design and want to ensure that notifications follow the theme style (e.g., dark theme), you can update the notificationProvider to use the notification.useNotification hook as mentioned in the GitHub issue (https://github.com/refinedev/refine/issues/4654). Example with Chakra UI Here is an example of how to open and close notifications using the useNotification hook with Chakra UI:

import React from "react";
import { Flex, Button } from "@chakra-ui/react";
import { useNotification } from "@refinedev/core";

export const HomePage = () => {
    const { open, close } = useNotification();

    return (
        <Flex align="center" justify="center" height="100vh" gap={4}>
            <Button
                onClick={() => {
                    open?.({
                        type: "success",
                        message: "Notification Title",
                        description: "This is the content of the notification.",
                        key: "notification-key",
                    });
                }}
            >
                Open Notification
            </Button>
            <Button
                variant="outline"
                onClick={() => {
                    close?.("notification-key");
                }}
            >
                Close Notification
            </Button>
        </Flex>
    );
};

import React from "react";
import { Flex, Button } from "@chakra-ui/react";
import { useNotification } from "@refinedev/core";

export const HomePage = () => {
    const { open, close } = useNotification();

    return (
        <Flex align="center" justify="center" height="100vh" gap={4}>
            <Button
                onClick={() => {
                    open?.({
                        type: "success",
                        message: "Notification Title",
                        description: "This is the content of the notification.",
                        key: "notification-key",
                    });
                }}
            >
                Open Notification
            </Button>
            <Button
                variant="outline"
                onClick={() => {
                    close?.("notification-key");
                }}
            >
                Close Notification
            </Button>
        </Flex>
    );
};

Source (https://refine.dev/docs/guides-concepts/notifications/#notification-providers) Customizing Notification Messages You can also customize the notification messages using the i18n provider. Here is an example of how to override the default notification messages:

// /locales/en/common.json
{
  "notifications": {
    "success": "Successful",
    "error": "Error (status code: {{statusCode}})",
    "undoable": "You have {{seconds}} seconds to undo",
    "createSuccess": "Successfully created {{resource}}",
    "createError": "There was an error creating {{resource}} (status code: {{statusCode}})",
    "deleteSuccess": "Successfully deleted {{resource}}",
    "deleteError": "Error when deleting {{resource}} (status code: {{statusCode}})",
    "editSuccess": "Successfully edited {{resource}}",
    "editError": "Error when editing {{resource}} (status code: {{statusCode}})",
    "importProgress": "Importing: {{processed}}/{{total}}"
  }
}

// /locales/en/common.json
{
  "notifications": {
    "success": "Successful",
    "error": "Error (status code: {{statusCode}})",
    "undoable": "You have {{seconds}} seconds to undo",
    "createSuccess": "Successfully created {{resource}}",
    "createError": "There was an error creating {{resource}} (status code: {{statusCode}})",
    "deleteSuccess": "Successfully deleted {{resource}}",
    "deleteError": "Error when deleting {{resource}} (status code: {{statusCode}})",
    "editSuccess": "Successfully edited {{resource}}",
    "editError": "Error when editing {{resource}} (status code: {{statusCode}})",
    "importProgress": "Importing: {{processed}}/{{total}}"
  }
}

Source (https://refine.dev/docs/guides-concepts/notifications/#notification-providers) Customizing Notifications in Data Hooks You can also customize notifications in data hooks like useUpdate and useForm:

import { useUpdate } from "@refinedev/core";

const { mutate } = useUpdate();
mutate({
  successNotification: (data, values, resource) => {
    return {
      message: `${data.title} Successfully fetched.`,
      description: "Success with no errors",
      type: "success",
    };
  },
  errorNotification: (data, values, resource) => {
    return {
      message: `Something went wrong when getting ${data.id}`,
      description: "Error",
      type: "error",
    };
  },
});

import { useUpdate } from "@refinedev/core";

const { mutate } = useUpdate();
mutate({
  successNotification: (data, values, resource) => {
    return {
      message: `${data.title} Successfully fetched.`,
      description: "Success with no errors",
      type: "success",
    };
  },
  errorNotification: (data, values, resource) => {
    return {
      message: `Something went wrong when getting ${data.id}`,
      description: "Error",
      type: "error",
    };
  },
});

Source (https://refine.dev/docs/guides-concepts/notifications/#notification-providers) For more detailed information, you can refer to the [Refine documentation on notifications](https://refine.dev ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

fascinating-indigo•2w ago

with this only modify some props, but i need to change css propierties