React Notification Center API Reference

This page contains the complete documentation about the React Notification Center package. You can find here the list of all the components, hooks and props that you can use.

Components

Components are the building blocks of the React Notification Center package. They are used to build the UI of the notification center.

NovuProvider

The NovuProvider is the root component of the React Notification Center package. It is used to wrap the components code and provide the notifications feed context to all its children. It's responsible for establishing the notification center session, managing web socket connection and fetching the notifications feed.

Prop	Type	Description
backendUrl	string (optional)	The custom backend URL, your own deployed instance of the API. The default is https://api.novu.co.app.
socketUrl	string (optional)	The custom socket URL, your own deployed instance of the WS app. The default is https://ws.novu.co.
applicationIdentifier	string	The app id taken from the Novu Settings -> API Keys tab.
subscriberId	string (optional)	The unique subscriber id from your system. If not provided will be auto generated by Novu.
subscriberHash	string (optional)	The HMAC encrypted `subscrinerId`, more info.
stores	object[] (optional)	The connection object between feed and notification center tab.
i18n	object (optional)	The prop allowing to configure the UI language.
styles	object (optional)	The prop allowing to style the notification center. It's based on the `CSSInterpolation` object from the `@emotion/css` package, you can find more details about it here.
initialFetchingStrategy	object (optional)	The fetching strategy. By default notifications feed and user preferences are not fetched until the notification center is opened. You might need to tweak this configuration when building a custom UI and if you need to fetch notifications right away. Also it's possible to change it when some action happens using the useNovuContext hook and `setFetchingStrategy` prop.
children	object	The ReactNode object type, the "consumer" of the NovuProvider context.
onLoad	function (optional)	The function that is called with an organization object after the notification center session is initialized.

Props interface

interface INovuProviderProps {
  backendUrl?: string;
  socketUrl?: string;
  applicationIdentifier: string;
  subscriberId?: string;
  subscriberHash?: string;
  stores?: IStore[];
  i18n?: I18NLanguage | ITranslationEntry;
  styles?: INotificationCenterStyles;
  initialFetchingStrategy?: Partial<IFetchingStrategy>;
  children: React.ReactNode;
  onLoad?: (data: { organization: IOrganizationEntity }) => void;
}

Store interface

interface IStore {
  storeId: string;
  query?: IStoreQuery;
}

interface IStoreQuery {
  feedIdentifier?: string | string[];
  seen?: boolean;
  read?: boolean;
}

I18NLanguage interface

type I18NLanguage = 'en' | 'de' ...;

interface ITranslationContent {
  readonly notifications: string;
  readonly markAllAsRead: string;
  readonly poweredBy: string;
  readonly settings: string;
  readonly removeMessage: string;
  readonly markAsRead: string;
  readonly markAsUnRead: string;
}

interface ITranslationEntry {
  readonly translations: Partial<ITranslationContent>;
  readonly lang: string;
}

Styles interface

interface NotificationCenterStyles {
  bellButton?: ObjectWithRoot<{
    dot?: CSSFunctionOrObject;
  }>;
  unseenBadge?: CSSFunctionOrObject;
  popover?: {
    arrow?: CSSFunctionOrObject;
    dropdown?: CSSFunctionOrObject;
  };
  loader?: ObjectWithRoot;
  layout?: ObjectWithRoot;
  header?: ObjectWithRoot<{
    title?: CSSFunctionOrObject;
    markAsRead?: CSSFunctionOrObject;
    cog?: CSSFunctionOrObject;
    backButton?: CSSFunctionOrObject;
  }>;
  tabs?: {
    tabsList?: CSSFunctionOrObject;
    tab?: CSSFunctionOrObject;
    tabLabel?: CSSFunctionOrObject;
    tabIcon?: CSSFunctionOrObject;
  };
  accordion?: {
    item?: CSSFunctionOrObject;
    content?: CSSFunctionOrObject;
    control?: CSSFunctionOrObject;
    chevron?: CSSFunctionOrObject;
  };
  switch?: ObjectWithRoot<{
    input?: CSSFunctionOrObject;
    track?: CSSFunctionOrObject;
    thumb?: CSSFunctionOrObject;
  }>;
  footer?: ObjectWithRoot<{
    title?: CSSFunctionOrObject;
  }>;
  notifications?: ObjectWithRoot<{
    listItem?: {
      read?: CSSFunctionOrObject;
      unread?: CSSFunctionOrObject;
      layout?: CSSFunctionOrObject;
      contentLayout?: CSSFunctionOrObject;
      title?: CSSFunctionOrObject;
      timestamp?: CSSFunctionOrObject;
      dotsButton?: CSSFunctionOrObject;
      buttons?: ObjectWithRoot<{
        primary?: CSSFunctionOrObject;
        secondary?: CSSFunctionOrObject;
      }>;
    };
  }>;
  actionsMenu?: {
    arrow?: CSSFunctionOrObject;
    dropdown?: CSSFunctionOrObject;
    item?: CSSFunctionOrObject;
  };
  preferences?: ObjectWithRoot<{
    item?: {
      title?: CSSFunctionOrObject;
      channels?: CSSFunctionOrObject;
      divider?: CSSFunctionOrObject;
      content?: {
        icon?: CSSFunctionOrObject;
        channelLabel?: CSSFunctionOrObject;
        success?: CSSFunctionOrObject;
      };
    };
  }>;
}

type CSSFunctionInterpolation = (args: {
  theme: INovuTheme;
  common: ICommonTheme;
  colorScheme: ColorScheme;
}) => CSSInterpolation;

type CSSFunctionOrObject = CSSFunctionInterpolation | CSSInterpolation;

type ObjectWithRoot<T = {}> = T & {
  root: CSSFunctionOrObject;
};

Fetching strategy interface

interface IFetchingStrategy {
  fetchUnseenCount: boolean;
  fetchOrganization: boolean;
  fetchNotifications: boolean;
  fetchUserPreferences: boolean;
}

PopoverNotificationCenter

The floating popover component that appears when clicking on the NotificationBell button. It renders the NotificationCenter component inside its content.

Prop	Type	Description
position	string (optional)	Position of the popover relative to the bell icon. It is based on the Mantine Popover position. The default is set to 'bottom-end'.
offset	number (optional)	Gap between the Bell icon and Popover in px.
colorScheme	string	The UI light or dark mode.
theme	object (optional)	The theme object allowing you to override light and dark colors of the UI components. Deprecated for styling, please use the styles prop on the NovuProvider.
tabs	object[] (optional)	Allows to define separate UI tabs for the notifications feed. The array of connection objects between the feed tab and store (that you define on the `NovuProvider`) and feed identifier.
listItem	function (optional)	The render function allowing you to define the custom element for the notification list item.
showUserPreferences	boolean (optional)	The flag that enables to show/hide the user preferences. By default it is enabled.
allowedNotificationActions	boolean (optional)	The flag that enables to show/hide the dots menu for actions performed on a notification. By default it is enabled.
onUrlChange	function (optional)	The function that is called when the notification item has a CTA of type redirect and is clicked.
onNotificationClick	function (optional)	The function that is called when the notification item is clicked.
onUnseenCountChanged	function (optional)	The function that is called when the unseen notifications count changed.
children	function	The render function that allows you to define the custom bell button. It's called with an argument that has `unseenCount` prop the number of unseen notifications.
header	function (optional)	The render function that allows you to define the custom header component.
footer	function (optional)	The render function that allows you to define the custom footer component.
emptyState	function (optional)	The render function that allows you to define the custom component for the empty notifications list state.
onActionClick	function (optional)	The callback function triggered when the notification button is clicked.
actionsResultBlock	function (optional)	The render function that allows you to define the custom component that will be rendered after the notification button is clicked.
onTabClick	function (optional)	The callback function triggered when the notifications feed tab changes.

Props interface

interface IPopoverNotificationCenterProps {
  position?: PopoverProps['position'];
  offset?: number;
  colorScheme: ColorScheme;
  theme?: INovuThemePopoverProvider;
  tabs?: ITab[];
  listItem?: ListItem;
  showUserPreferences?: boolean;
  allowedNotificationActions?: boolean;
  onUrlChange?: (url: string) => void;
  onNotificationClick?: (notification: IMessage) => void;
  onUnseenCountChanged?: (unseenCount: number) => void;
  children: (props: INotificationBellProps) => JSX.Element;
  header?: () => JSX.Element;
  footer?: () => JSX.Element;
  emptyState?: () => JSX.Element;
  onActionClick?: (templateIdentifier: string, type: ButtonTypeEnum, message: IMessage) => void;
  actionsResultBlock?: (templateIdentifier: string, messageAction: IMessageAction) => JSX.Element;
  onTabClick?: (tab: ITab) => void;
}

More information about the IMessage interface, and the theme interface.

The tab interface

interface ITab {
  name: string;
  storeId: string;
}

The list item interface

type ListItem = (
  message: IMessage,
  onActionButtonClick: (actionButtonType: ButtonTypeEnum) => void,
  onNotificationClick: () => void
) => JSX.Element;

NotificationCenter

The component that renders the notifications feed and allows to update the user preferences.

Prop	Type	Description
colorScheme	string	The UI light or dark mode.
theme	object (optional)	The theme object allowing you to override light and dark colors of the UI components. Deprecated for styling, please use the styles prop on the NovuProvider.
tabs	object[] (optional)	Allows to define separate UI tabs for the notifications feed. The array of connection objects between the feed tab and store (that you define on the `NovuProvider`) and feed identifier.
listItem	function (optional)	The render function allowing you to define the custom element for the notification list item.
showUserPreferences	boolean (optional)	The flag that enables to show/hide the user preferences. By default it is enabled.
allowedNotificationActions	boolean (optional)	The flag that enables to show/hide the dots menu for actions performed on a notification. By default it is enabled.
onUrlChange	function (optional)	The function that is called when the notification item has a CTA of type redirect and is clicked.
onNotificationClick	function (optional)	The function that is called when the notification item is clicked.
onUnseenCountChanged	function (optional)	The function that is called when the unseen notifications count changed.
header	function (optional)	The render function that allows you to define the custom header component.
footer	function (optional)	The render function that allows you to define the custom footer component.
emptyState	function (optional)	The render function that allows you to define the custom component for the empty notifications list state.
onActionClick	function (optional)	The callback function triggered when the notification button is clicked.
actionsResultBlock	function (optional)	The render function that allows you to define the custom component that will be rendered after the notification button is clicked.
onTabClick	function (optional)	The callback function triggered when the notifications feed tab changes.

The props interface

interface INotificationCenterProps {
  colorScheme: ColorScheme;
  theme?: INovuThemeProvider;
  tabs?: ITab[];
  listItem?: ListItem;
  showUserPreferences?: boolean;
  allowedNotificationActions?: boolean;
  onUrlChange?: (url: string) => void;
  onNotificationClick?: (notification: IMessage) => void;
  onUnseenCountChanged?: (unseenCount: number) => void;
  header?: () => JSX.Element;
  footer?: () => JSX.Element;
  emptyState?: () => JSX.Element;
  onActionClick?: (templateIdentifier: string, type: ButtonTypeEnum, message: IMessage) => void;
  actionsResultBlock?: (templateIdentifier: string, messageAction: IMessageAction) => JSX.Element;
  onTabClick?: (tab: ITab) => void;
}

NotificationBell

The component that renders the notification bell with the unseen notifications count.

Prop	Type	Description
unseenCount	number (optional)	The number of unseen notifications.
unseenBadgeColor	string \| object (optional)	The unseen notifications count badge color.
unseenBadgeBackgroundColor	string (optional)	The background color of the notification unseen count badge.
colorScheme	string (optional)	The UI light or dark mode.

The props interface

interface INotificationBellProps {
  unseenCount?: number;
  unseenBadgeColor?: string | ISvgStopColor;
  unseenBadgeBackgroundColor?: string;
  colorScheme?: ColorScheme;
}

interface ISvgStopColor {
  stopColor?: string;
  stopColorOffset?: string;
}

Hooks

The library exposes the following hooks that allow you to build your own UI components. All the hooks should be defined inside the NovuProvider component. Most of the hooks are based on the @tanstack/react-query library.

useNotifications

The hook that allows you to get the notifications feed data and unseen notifications count. The notifications are fetched only when the fetchingStrategy.fetchNotifications is set to true interface, check the initialFetchingStrategy prop on the NovuProvider component.

const result = useNotifications();

The hook return interface

interface INotificationsContext {
  storeId: string;
  stores: IStore[];
  unseenCount: number;
  notifications: IMessage[];
  hasNextPage: boolean;
  isLoading: boolean;
  isFetching: boolean;
  isFetchingNextPage: boolean;
  setStore: (storeId?: string) => void;
  fetchNextPage: () => void;
  refetch: () => void;
  markNotificationAsRead: (messageId: string) => void;
  markNotificationAsUnRead: (messageId: string) => void;
  markNotificationAsSeen: (messageId: string) => void;
  markAllNotificationsAsRead: () => void;
  markAllNotificationsAsSeen: () => void;
  removeMessage: (messageId: string) => void;
}

Prop	Type	Description
storeId	string	The active storeId.
stores	object[]	The array of stores passed to the `NovuProvider`.
unseenCount	number	The unseen notifications count.
notifications	object[]	The feed notifications array.
hasNextPage	boolean	The flag indicating if the next notifications page to fetch is available.
isLoading	boolean	The flag indicating if the initial notifications fetch request is on the fly.
isFetching	boolean	The flag indicating if the notifications are fetching including initial fetch.
isFetchingNextPage	boolean	The flag indicating if the next notifications page request in on the fly.
setStore	function	The function allowing to change the current notifications store/feed.
fetchNextPage	function	The function that fires the fetch request for the next notifications page.
refetch	function	The function that allows to refetch all the notifications, when multiple page requests were made it will refetch all of them.
markNotificationAsRead	function	The function takes the notification message id as argument and allows to mark that notification as read.
markNotificationAsUnRead	function	The function takes the notification message id as argument and allows to mark that notification as unread.
markNotificationAsSeen	function	The function takes the notification message id as argument and allows to mark that notification as seen.
markAllNotificationsAsRead	function	The function allowing you to mark all the fetched notifications as read.
markAllNotificationsAsSeen	function	The function allowing you to mark all the fetched notifications as seen.
removeMessage	function	The function allowing you to delete a notification.

You can find more information about the IMessage interface here.

useFetchNotifications

The hook that is only responsible for fetching the notifications for a particular feed. It's a thin version of the useNotifications hook and is based on the useInfiniteQuery hook from the react-query library. The notifications are fetched only when the fetchingStrategy.fetchNotifications is set to true reference.

const query: IStoreQuery = {};

const onSuccess = (data: IPaginatedResponse<IMessage>) => {};

const onError = (error: Error) => {};

const {
  data: notificationsPages,
  hasNextPage,
  isLoading,
  isFetching,
  isFetchingNextPage,
  fetchNextPage,
  refetch,
} = useFetchNotifications({ query }, { onSuccess, onError });

The hook args interface

interface IUseFetchNotificationsArgs {
  onSuccess?: (data: IPaginatedResponse<IMessage>) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useInfiniteQuery hook
}

The hook return interface

interface InfiniteData<TData> {
  pages: TData[];
  pageParams: unknown[];
}

interface IUseUnseenCountResult {
  data: InfiniteData<IPaginatedResponse<IMessage>>;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useInfiniteQuery hook result
}

useUnseenCount

The hook that allows you to get the unseen notifications count. Under the hood it uses the socket connection to get the unseen count updates.

interface ICountData {
  count: number;
}

const onSuccess = ({ count }: ICountData) => {};

const onError = (error: Error) => {};

const { data, isLoading, isError, error } = useUnseenCount({ onSuccess, onError });

The hook args interface

interface IUseUnseenCountArgs {
  onSuccess?: (data: ICountData) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useQuery hook
}

The hook return interface

interface IUseUnseenCountResult {
  data?: ICountData;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useQuery hook result
}

useFeedUnseenCount

The hook that fetches the unseen count for a particular feed.

interface ICountData {
  count: number;
}

const query: IStoreQuery = {};

const onSuccess = (data: ICountData) => {};

const onError = (error: Error) => {};

const result = useFeedUnseenCount({ query }, { onSuccess, onError });

The hook args interface

interface IUseFeedUnseenCountArgs {
  onSuccess?: (data: ICountData) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useQuery hook
}

The hook return interface

interface IUseFeedUnseenCountResult {
  data?: ICountData;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useQuery hook result
}

useFetchOrganization

The hook that fetches the organization information.

interface IOrganizationEntity {
  _id: string;
  name: string;
  members: {
    _id: string;
    _userId?: string;
    user?: Pick<IUserEntity, 'firstName' | '_id' | 'lastName' | 'email'>;
    roles: MemberRoleEnum[];
    invite?: IMemberInvite;
    memberStatus: MemberStatusEnum;
  }[];
  branding?: {
    color: string;
    logo: string;
    fontColor: string;
    fontFamily: string;
    contentBackground: string;
    direction: 'ltr' | 'rtl';
  };
}

const onSuccess = (data: IOrganizationEntity) => {};

const onError = (error: Error) => {};

const result = useFetchOrganization({ onSuccess, onError });

The hook args interface

interface IUseFetchOrganizationArgs {
  onSuccess?: (data: IOrganizationEntity) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useQuery hook
}

The hook return interface

interface IUseFetchOrganizationResult {
  data?: IOrganizationEntity;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useQuery hook result
}

useFetchUserPreferences

The hook that fetches the user preferences.

const onSuccess = (data: IUserPreferenceSettings[]) => {};

const onError = (error: Error) => {};

const result = useFetchUserPreferences({ onSuccess, onError });

The hook args interface

interface IUseFetchUserPreferencesArgs {
  onSuccess?: (data: IUserPreferenceSettings[]) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useQuery hook
}

The hook return interface

interface IUseFetchUserPreferencesResult {
  data?: IUserPreferenceSettings[];
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useQuery hook result
}

useUpdateUserPreferences

The hook that allows you to update the user preferences.

interface IPreferenceChannels {
  email?: boolean;
  sms?: boolean;
  in_app?: boolean;
  chat?: boolean;
  push?: boolean;
}

interface IUserPreferenceSettings {
  template: { _id: string; name: string; critical: boolean };
  preference: { enabled: boolean; channels: IPreferenceChannels };
}

const onSuccess = (data: IUserPreferenceSettings) => {};

const onError = (error: Error) => {};

const { updateUserPreferences, isLoading, isError, error } = useUpdateUserPreferences({
  onSuccess,
  onError,
});

The hook args interface

interface IUseUnseenCountArgs {
  onSuccess?: (data: IUserPreferenceSettings) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useMutation hook
}

The hook return interface

interface IUpdateUserPreferencesVariables {
  templateId: string;
  channelType: string;
  checked: boolean;
}

interface IUseUnseenCountResult {
  updateUserPreferences: (variables: IUpdateUserPreferencesVariables) => void;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useMutation hook result
}

useUpdateAction

The hook that allows you to update the notification action button status.

const onSuccess = (data: IMessage) => {};

const onError = (error: Error) => {};

const { updateAction, isLoading, isError, error } = useUpdateAction({ onSuccess, onError });

You can find more information about the IMessage interface here.

The hook args interface

interface IUseUpdateActionArgs {
  onSuccess?: (data: IMessage) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useMutation hook
}

The hook return interface

interface IUpdateActionVariables {
  messageId: string;
  actionButtonType: ButtonTypeEnum;
  status: MessageActionStatusEnum;
  payload?: Record<string, unknown>;
}

interface IUseUnseenCountResult {
  updateAction: (variables: IUpdateActionVariables) => void;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useMutation hook result
}

useMarkNotificationsAs

The hook that marks the notifications as read or seen. You can find more information about the IMessage interface here.

const onSuccess = (data: IMessage[]) => {};

const onError = (error: Error) => {};

const { markNotificationsAs, isLoading, isError, error } = useMarkNotificationsAs({
  onSuccess,
  onError,
});

The hook args interface

interface IUseMarkNotificationsAsArgs {
  onSuccess?: (data: IMessage[]) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useMutation hook
}

The hook return interface

interface IMarkNotificationsAsVariables {
  messageId: IMessageId;
  seen: boolean;
  read: boolean;
}

interface IUseMarkNotificationsAsResult {
  markNotificationsAs: (args: IMarkNotificationsAsVariables) => void;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useMutation hook result
}

useRemoveNotification

The hook that allows you to remove a message. It will delete the message for the subscriber and will refetch the feed.

const onSuccess = (data: IMessage) => {};

const onError = (error: Error) => {};

const { removeNotification, isLoading, isError, error } = useRemoveNotification({
  onSuccess,
  onError,
});

The hook args interface

interface IUseRemoveNotificationArgs {
  onSuccess?: (data: IMessage) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useMutation hook
}

The hook return interface

interface IRemoveNotificationVariables {
  messageId: IMessageId;
}

interface IUseRemoveNotificationResult {
  removeNotification: (args: IRemoveNotificationVariables) => void;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useMutation hook result
}

useSocket

The hook that allows you to get the reference to socket object.

const { socket } = useSocket();

The socket interface

interface ISocket {
  on: (eventName: string, callback: (data: any) => void) => void;
  off: (eventName: string) => void;
}

useNovuContext

The hook that allows you to get the reference to the NovuProvider context.

const result = useNovuContext();

The hook return interface

interface INovuProviderContext {
  backendUrl?: string;
  subscriberId?: string;
  applicationIdentifier?: string;
  isSessionInitialized: boolean;
  socketUrl?: string;
  subscriberHash: string;
  apiService: ApiService;
  socket?: ISocket;
  fetchingStrategy: IFetchingStrategy;
  setFetchingStrategy: (strategy: Partial<IFetchingStrategy>) => void;
  onLoad: (data: { organization: IOrganizationEntity }) => void;
}

useNovuTheme

The hook that allows you to get the reference to the theme object.

const result = useNovuTheme();

The hook return interface

interface INovuThemeProviderContext {
  theme: INovuTheme;
  common: ICommonTheme;
  colorScheme: ColorScheme;
}

useTranslations

The hook that allows you to get the reference to the translations object.

const result = useTranslations();

The hook return interface

interface ITranslations {
  lang: string;
  t: (key: string) => string;
  dateFnsLocale: () => Locale;
}

The theme interface

interface INovuTheme {
  layout?: IThemeLayout;
  header?: IThemeHeader;
  popover?: IThemePopover;
  actionsMenu?: IThemeActionsMenu;
  notificationItem?: IThemeNotificationListItem;
  userPreferences?: IThemeUserPreferences;
  footer?: IThemeFooter;
  loaderColor?: string;
}

IThemeLayout customization properties

Property	Default Value - Light Theme	Default Value - Dark Theme
`background`	`#FFFFFF`	`#1E1E26`
`boxShadow`	`0px 5px 15px rgba(122, 133, 153, 0.25)`	`0px 5px 20px rgba(0, 0, 0, 0.2)`
`wrapper.secondaryFontColor`	`#BEBECC`	`#525266`

IThemeHeader customization properties

Property	Default Value - Light Theme	Default Value - Dark Theme
`badgeColor`	`linear-gradient(0deg,#FF512F 0%,#DD2476 100%)`	`linear-gradient(0deg,#FF512F 0%,#DD2476 100%)`
`badgeTextColor`	`#FFFFFF`	`#FFFFFF`
`fontColor`	`#828299`	`#FFFFFF`

IThemePopover customization properties

Property	Default Value - Light Theme	Default Value - Dark Theme
`arrowColor`	`#FFFFFF`	`#1E1E26`

IThemeNotificationListItem customization properties

Property	Default Value - Light Theme	Default Value - Dark Theme
`seen.fontColor`	`#828299`	`#FFFFFF`
`seen.background`	`#F5F8FA`	`#23232B`
`seen.timeMarkFontColor`	`#BEBECC`	`#525266`
`unseen.fontColor`	`#828299`	`#FFFFFF`
`unseen.background`	`#FFFFFF`	`#292933`
`unseen.boxShadow`	`0px 5px 15px rgba(122, 133, 153, 0.25)`	`0px 5px 20px rgba(0, 0, 0, 0.2)`
`unseen.notificationItemBeforeBrandColor`	`linear-gradient(0deg,#FF512F 0%,#DD2476 100%)`	`linear-gradient(0deg,#FF512F 0%,#DD2476 100%)`
`unseen.timeMarkFontColor`	`#828299`	`#828299`
`buttons.primary.backGroundColor`	`linear-gradient(99deg,#DD2476 0% 0%, #FF512F 100% 100%)`	`linear-gradient(99deg,#DD2476 0% 0%, #FF512F 100% 100%)`
`buttons.primary.fontColor`	`#FFFFFF`	`#FFFFFF`
`buttons.primary.removeCircleColor`	`white`	`white`
`buttons.primary.fontFamily`	`Lato`	`Lato`
`buttons.secondary.backGroundColor`	`#F5F8FA`	`#3D3D4D`
`buttons.secondary.fontColor`	`#525266`	`#FFFFFF`
`buttons.secondary.removeCircleColor`	`#525266`	`#525266`
`buttons.secondary.fontFamily`	`Lato`	`Lato`

IThemeActionsMenu customization properties

Property	Default Value - Light Theme	Default Value - Dark Theme
`dotsButtonColor`	`#A1A1B2`	`#525266`
`dropdownColor`	`#FFFFFF`	`#292933`
`hoverColor`	`#F5F8FA`	`#3D3D4D`
`fontColor`	`#525266`	`#FFFFFF`

IThemeUserPreferences customization properties

Property	Default Value - Light Theme	Default Value - Dark Theme
`settingsButtonColor`	`#A1A1B2`	`#525266`
`accordion.background`	`#FFFFFF`	`#292933`
`accordion.fontColor`	`#525266`	`#FFFFFF`
`accordion.secondaryFontColor`	`#828299`	`#828299`
`accordion.boxShadow`	`0px 5px 15px rgba(122, 133, 153, 0.25)`	`0px 5px 20px rgba(0, 0, 0, 0.2)`
`accordion.arrowColor`	`#828299`	`#828299`
`accordion.arrowColor`	`#EDF0F2`	`#3D3D4D`
`accordionItem.fontColor.active`	`#525266`	`#FFFFFF`
`accordionItem.fontColor.inactive`	`#BEBECC`	`#828299`
`accordionItem.icon.active`	`#525266`	`#FFFFFF`
`accordionItem.icon.inactive`	`#BEBECC`	`#525266`
`accordionItem.switch.backgroundChecked`	`linear-gradient(0deg,#FF512F 0%,#DD2476 100%)`	`linear-gradient(0deg,#FF512F 0%,#DD2476 100%)`
`accordionItem.switch.backgroundUnchecked`	`#BEBECC`	`#3D3D4D`
`footer.logoTextColor`	`#000000`	`#FFFFFF`
`footer.logoPrefixFontColor`	`#A1A1B2`	`#525266`
`loaderColor`	`linear-gradient(0deg,#FF512F 0%,#DD2476 100%)`	`linear-gradient(0deg,#FF512F 0%,#DD2476 100%)`

IThemeFooter customization properties

Property	Default Value - Light Theme	Default Value - Dark Theme
`logoTextColor`	`#000000`	`#FFFFFF`
`logoPrefixFontColor`	`#A1A1B2`	`#525266`

NotificationBell customization properties

Property	Default Value - Light Theme	Default Value - Dark Theme
`colorScheme`	`light`	`light`
`unseenBadgeColor`	`stopColor: '#FF512F', stopColorOffset: '#DD2476'`	`{ stopColor: '#FF512F', stopColorOffset: '#DD2476' }`
`unseenBadgeBackgroundColor`	`#FFFFFF`	`#1E1E26`

Note: unseenBadgeColor is of a type : string | {stopColor : string, stopColorOffset : sting}, so if you would like one color badge you can use a string of the color and not the object in order to create gradient.

The notification `IMessage` model

IMessage model has the following properties:

Property	Type	Description
`_id`	`string`	A unique Novu message identifier
`channel`	`ChannelTypeEnum`	Use to specify the actual channel of this message (`in_app` will be used here)
`seen`	`boolean`	Whether the notification item was read by the user, changed when the user clicks on the notification
`lastSeenDate`	`ISODate`	When the user has last seen the notification
`content`	`string`	An HTML string of the generated notification content with parsed and replaced variables
`templateIdentifier`	`string`	A unique Novu template identifier
`payload`	`Record<string, unknown>`	The `payload` object that was passed the notification template was triggered.
`createdAt`	`ISODate`	The creation date of the message
`cta.type`	`ChannelCTATypeEnum`	The type of the CTA specified in the admin panel
`cta.data.url`	`string`	The redirect URL set in the admin panel, can be used to navigate on notification click
`cta.action.status`	`boolean`	Indication whether the action occurred
`cta.action.buttons`	`IMessageButton[]`	Array of action buttons
`cta.action.result.payload`	`Record<string, unknown>`	Payload object that send on updateAction method in useNotifications hook
`cta.action.result.type`	`ButtonTypeEnum`	Type of the button

IMessageButton

Property	Type	Description
`type`	`ButtonTypeEnum`	Button type enum
`content`	`string`	Button inner text

ChannelCTATypeEnum

Property	Value
`REDIRECT`	redirect

ButtonTypeEnum

Property	Value
`PRIMARY`	primary
`SECONDARY`	secondary

React Notification Center API Reference

Components​

NovuProvider​

Props interface​

Store interface​

I18NLanguage interface​

Styles interface​

Fetching strategy interface​

PopoverNotificationCenter​

Props interface​

The tab interface​

The list item interface​

NotificationCenter​

The props interface​

NotificationBell​

The props interface​

Hooks​

useNotifications​

The hook return interface​

useFetchNotifications​

The hook args interface​

The hook return interface​

useUnseenCount​

The hook args interface​

The hook return interface​

useFeedUnseenCount​

The hook args interface​

The hook return interface​

useFetchOrganization​

The hook args interface​

The hook return interface​

useFetchUserPreferences​

The hook args interface​

The hook return interface​

useUpdateUserPreferences​

The hook args interface​

The hook return interface​

useUpdateAction​

The hook args interface​

The hook return interface​

useMarkNotificationsAs​

The hook args interface​

The hook return interface​

useRemoveNotification​

The hook args interface​

The hook return interface​

useSocket​

The socket interface​

useNovuContext​

The hook return interface​

useNovuTheme​

The hook return interface​

useTranslations​

The hook return interface​

The theme interface​

The notification IMessage model​

IMessageButton​

ChannelCTATypeEnum​

ButtonTypeEnum​

Components

NovuProvider

Props interface

Store interface

I18NLanguage interface

Styles interface

Fetching strategy interface

PopoverNotificationCenter

Props interface

The tab interface

The list item interface

NotificationCenter

The props interface

NotificationBell

The props interface

Hooks

useNotifications

The hook return interface

useFetchNotifications

The hook args interface

The hook return interface

useUnseenCount

The hook args interface

The hook return interface

useFeedUnseenCount

The hook args interface

The hook return interface

useFetchOrganization

The hook args interface

The hook return interface

useFetchUserPreferences

The hook args interface

The hook return interface

useUpdateUserPreferences

The hook args interface

The hook return interface

useUpdateAction

The hook args interface

The hook return interface

useMarkNotificationsAs

The hook args interface

The hook return interface

useRemoveNotification

The hook args interface

The hook return interface

useSocket

The socket interface

useNovuContext

The hook return interface

useNovuTheme

The hook return interface

useTranslations

The hook return interface

The theme interface

The notification `IMessage` model

IMessageButton

ChannelCTATypeEnum

ButtonTypeEnum