​
PopoverNotificationCenter Customization

<PopoverNotificationCenter> is a pre built notification center component that can be used to show notifications in your application. It is a popover component that can be placed anywhere in your application. A bell will appear on the page. On click of that bell, a popover will appear. Checkout all customizations and available props. If you are looking for a component without popover use regular <NotificationCenter> component. Checkout props of this component. Few selected customization options are explained below:-

​
Implementing custom bell icon

It is common that you might have a special set of icons you use within your application and you will want to replace the default: NotificationBell coming from our library.

For this you can easily switch the NotificationBell with your own bell. Just make sure you pass the unseenCount param inside and use it accordingly.

<PopoverNotificationCenter colorScheme="dark">
  {({ unseenCount }) => (
    <CustomBell
      unseenCount={unseenCount}
      colorScheme="dark"
      unseenBadgeBackgroundColor="#FFFFFF"
      unseenBadgeColor="#FF0000"
    />
  )}
</PopoverNotificationCenter>

​
Dark mode support

To support dark mode in your application the notification center component can receive a colorScheme prop that can receive either dark or light mode.

<PopoverNotificationCenter colorScheme={"dark" || "light"}>
  {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
</PopoverNotificationCenter>

​
Popover positioning

Use position  and offset prop to position the popover relative to the Bell icon

<PopoverNotificationCenter position="left-start" offset={20}>
  {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
</PopoverNotificationCenter>

Use header, footer and emptyState prop to customize the header, footer and empty state of notification center.

const Header = () => {
  return <span> My custom header </span>;
};

const Footer = () => {
  return <span> My custom footer </span>;
};

const EmptyState = () => {
  return <span> My custom empty state </span>;
};

<PopoverNotificationCenter
  colorScheme="dark"
  header={() => <Header />}
  footer={() => <Footer />}
  emptyState={<EmptyState />}
>
  {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
</PopoverNotificationCenter>;

​
Notification item

Use the listItem prop to show custom notification items.

<PopoverNotificationCenter
  colorScheme={colorScheme}
  onNotificationClick={handlerOnNotificationClick}
  onActionClick={handlerOnActionClick}
  listItem={(
    notification,
    handleActionButtonClick,
    handleNotificationClick
  ) => {
    return (
      <a
        href="/"
        onClick={(e) => {
          e.preventDefault();
          handleNotificationClick();
        }}
      >
        {notification.content}
      </a>
    );
  }}
>
  {({ unseenCount }) => {
    return <NotificationBell unseenCount={unseenCount} />;
  }}
</PopoverNotificationCenter>

​
Customize the UI language

If you want to use a language other than english for the UI, the NovuProvider component can accept an optional i18n prop.

<NovuProvider
  subscriberId={"USER_ID"}
  applicationIdentifier={"APPLICATION_IDENTIFIER"}
  i18n="en"
>
  <PopoverNotificationCenter colorScheme="dark">
    {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
  </PopoverNotificationCenter>
</NovuProvider>

The i18n prop can accept 2 different types of values

  • 2 letter language string
i18n = "en";
  • Translation object
i18n={{
  // Make sure that the following is a proper language code,
  // since this is used by Intl.RelativeTimeFormat in order to calculate the relative time for each notification
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
  lang: "de",

  translations: {
    poweredBy: "von",
    markAllAsRead: "Alles als gelesen markieren",
    notifications: "Benachrichtigungen",
    settings: "Einstellungen",
  },
}}
Novu uses en as the default value for i18n

​
Customization using styles prop

styles prop can be used to cutomise styling of each component of notification center. Read more about styles prop

export const styles = {
  bellButton: {
    root: {
      marginTop: "20px",
      svg: {
        color: "#AFE1AF",
        fill: "white",
        minWidth: "20px",
        minHeight: "20px"
      }
    },
    dot: {
      rect: {
        fill: "white",
        strokeWidth: "0",
        width: "3px",
        height: "3px",
        x: 10,
        y: 2
      }
    }
  }
}

​
Customization Using Hooks

If you don’t want to use our pre built component then, you can build your own notification center using hooks. @novu/notification-center react package provides many hooks like useNotifications, useFetchNotifications, useUpdateUserPreferences. Checkout all available hooks. All the hooks should be defined inside the NovuProvider component. Most of the hooks are based on the @tanstack/react-query library.

Checkout below example on how to use useNotifications and useFetchNotifications hook

Was this page helpful?

Get StartedPreference