Skip to main content

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.

PropTypeDescription
backendUrlstring (optional)The custom backend URL, your own deployed instance of the API. The default is https://api.novu.co.app.
socketUrlstring (optional)The custom socket URL, your own deployed instance of the WS app. The default is https://ws.novu.co.
applicationIdentifierstringThe app id taken from the Novu Settings -> API Keys tab.
subscriberIdstring (optional)The unique subscriber id from your system. If not provided will be auto generated by Novu.
subscriberHashstring (optional)The HMAC encrypted subscriberId, more info.
storesobject[] (optional)The connection object between feed and notification center tab.
i18nobject (optional)The prop allowing to configure the UI language.
stylesobject (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.
initialFetchingStrategyobject (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.
childrenobjectThe ReactNode object type, the "consumer" of the NovuProvider context.
onLoadfunction (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.

PropTypeDescription
positionstring (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'.
offsetnumber (optional)Gap between the Bell icon and Popover in px.
colorSchemestringThe UI light or dark mode.
themeobject (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.
tabsobject[] (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.
listItemfunction (optional)The render function allowing you to define the custom element for the notification list item.
showUserPreferencesboolean (optional)The flag that enables to show/hide the user preferences. By default it is enabled.
allowedNotificationActionsboolean (optional)The flag that enables to show/hide the dots menu for actions performed on a notification. By default it is enabled.
onUrlChangefunction (optional)The function that is called when the notification item has a CTA of type redirect and is clicked.
onNotificationClickfunction (optional)The function that is called when the notification item is clicked.
onUnseenCountChangedfunction (optional)The function that is called when the unseen notifications count changed.
childrenfunctionThe 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.
headerfunction (optional)The render function that allows you to define the custom header component.
footerfunction (optional)The render function that allows you to define the custom footer component.
emptyStateJSX.Element (optional)The render function that allows you to define the custom component for the empty notifications list state.
onActionClickfunction (optional)The callback function triggered when the notification button is clicked.
actionsResultBlockfunction (optional)The render function that allows you to define the custom component that will be rendered after the notification button is clicked.
onTabClickfunction (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.

PropTypeDescription
colorSchemestringThe UI light or dark mode.
themeobject (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.
tabsobject[] (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.
listItemfunction (optional)The render function allowing you to define the custom element for the notification list item.
showUserPreferencesboolean (optional)The flag that enables to show/hide the user preferences. By default it is enabled.
allowedNotificationActionsboolean (optional)The flag that enables to show/hide the dots menu for actions performed on a notification. By default it is enabled.
onUrlChangefunction (optional)The function that is called when the notification item has a CTA of type redirect and is clicked.
onNotificationClickfunction (optional)The function that is called when the notification item is clicked.
onUnseenCountChangedfunction (optional)The function that is called when the unseen notifications count changed.
headerfunction (optional)The render function that allows you to define the custom header component.
footerfunction (optional)The render function that allows you to define the custom footer component.
emptyStateJSX.Element (optional)The render function that allows you to define the custom component for the empty notifications list state.
onActionClickfunction (optional)The callback function triggered when the notification button is clicked.
actionsResultBlockfunction (optional)The render function that allows you to define the custom component that will be rendered after the notification button is clicked.
onTabClickfunction (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.

PropTypeDescription
unseenCountnumber (optional)The number of unseen notifications.
unseenBadgeColorstring | object (optional)The unseen notifications count badge color.
unseenBadgeBackgroundColorstring (optional)The background color of the notification unseen count badge.
colorSchemestring (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;
}
PropTypeDescription
storeIdstringThe active storeId.
storesobject[]The array of stores passed to the NovuProvider.
unseenCountnumberThe unseen notifications count.
notificationsobject[]The feed notifications array.
hasNextPagebooleanThe flag indicating if the next notifications page to fetch is available.
isLoadingbooleanThe flag indicating if the initial notifications fetch request is on the fly.
isFetchingbooleanThe flag indicating if the notifications are fetching including initial fetch.
isFetchingNextPagebooleanThe flag indicating if the next notifications page request in on the fly.
setStorefunctionThe function allowing to change the current notifications store/feed.
fetchNextPagefunctionThe function that fires the fetch request for the next notifications page.
refetchfunctionThe function that allows to refetch all the notifications, when multiple page requests were made it will refetch all of them.
markNotificationAsReadfunctionThe function takes the notification message id as argument and allows to mark that notification as read.
markNotificationAsUnReadfunctionThe function takes the notification message id as argument and allows to mark that notification as unread.
markNotificationAsSeenfunctionThe function takes the notification message id as argument and allows to mark that notification as seen.
markAllNotificationsAsReadfunctionThe function allowing you to mark all the fetched notifications as read.
markAllNotificationsAsSeenfunctionThe function allowing you to mark all the fetched notifications as seen.
removeMessagefunctionThe 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

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

IThemeHeader customization properties

PropertyDefault Value - Light ThemeDefault Value - Dark Theme
badgeColorlinear-gradient(0deg,#FF512F 0%,#DD2476 100%)linear-gradient(0deg,#FF512F 0%,#DD2476 100%)
badgeTextColor#FFFFFF#FFFFFF
fontColor#828299#FFFFFF

IThemePopover customization properties

PropertyDefault Value - Light ThemeDefault Value - Dark Theme
arrowColor#FFFFFF#1E1E26

IThemeNotificationListItem customization properties

PropertyDefault Value - Light ThemeDefault Value - Dark Theme
seen.fontColor#828299#FFFFFF
seen.background#F5F8FA#23232B
seen.timeMarkFontColor#BEBECC#525266
unseen.fontColor#828299#FFFFFF
unseen.background#FFFFFF#292933
unseen.boxShadow0px 5px 15px rgba(122, 133, 153, 0.25)0px 5px 20px rgba(0, 0, 0, 0.2)
unseen.notificationItemBeforeBrandColorlinear-gradient(0deg,#FF512F 0%,#DD2476 100%)linear-gradient(0deg,#FF512F 0%,#DD2476 100%)
unseen.timeMarkFontColor#828299#828299
buttons.primary.backGroundColorlinear-gradient(99deg,#DD2476 0% 0%, #FF512F 100% 100%)linear-gradient(99deg,#DD2476 0% 0%, #FF512F 100% 100%)
buttons.primary.fontColor#FFFFFF#FFFFFF
buttons.primary.removeCircleColorwhitewhite
buttons.primary.fontFamilyinheritinherit
buttons.secondary.backGroundColor#F5F8FA#3D3D4D
buttons.secondary.fontColor#525266#FFFFFF
buttons.secondary.removeCircleColor#525266#525266
buttons.secondary.fontFamilyinheritinherit

IThemeActionsMenu customization properties

PropertyDefault Value - Light ThemeDefault Value - Dark Theme
dotsButtonColor#A1A1B2#525266
dropdownColor#FFFFFF#292933
hoverColor#F5F8FA#3D3D4D
fontColor#525266#FFFFFF

IThemeUserPreferences customization properties

PropertyDefault Value - Light ThemeDefault Value - Dark Theme
settingsButtonColor#A1A1B2#525266
accordion.background#FFFFFF#292933
accordion.fontColor#525266#FFFFFF
accordion.secondaryFontColor#828299#828299
accordion.boxShadow0px 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.backgroundCheckedlinear-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
loaderColorlinear-gradient(0deg,#FF512F 0%,#DD2476 100%)linear-gradient(0deg,#FF512F 0%,#DD2476 100%)

IThemeFooter customization properties

PropertyDefault Value - Light ThemeDefault Value - Dark Theme
logoTextColor#000000#FFFFFF
logoPrefixFontColor#A1A1B2#525266

NotificationBell customization properties

PropertyDefault Value - Light ThemeDefault Value - Dark Theme
colorSchemelightlight
unseenBadgeColorstopColor: '#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:

PropertyTypeDescription
_idstringA unique Novu message identifier
channelChannelTypeEnumUse to specify the actual channel of this message (in_app will be used here)
seenbooleanWhether the notification item was read by the user, changed when the user clicks on the notification
lastSeenDateISODateWhen the user has last seen the notification
contentstringAn HTML string of the generated notification content with parsed and replaced variables
templateIdentifierstringA unique Novu template identifier
payloadRecord<string, unknown>The payload object that was passed the notification template was triggered.
createdAtISODateThe creation date of the message
cta.typeChannelCTATypeEnumThe type of the CTA specified in the admin panel
cta.data.urlstringThe redirect URL set in the admin panel, can be used to navigate on notification click
cta.action.statusbooleanIndication whether the action occurred
cta.action.buttonsIMessageButton[]Array of action buttons
cta.action.result.payloadRecord<string, unknown>Payload object that send on updateAction method in useNotifications hook
cta.action.result.typeButtonTypeEnumType of the button

IMessageButton

PropertyTypeDescription
typeButtonTypeEnumButton type enum
contentstringButton inner text

ChannelCTATypeEnum

PropertyValue
REDIRECTredirect

ButtonTypeEnum

PropertyValue
PRIMARYprimary
SECONDARYsecondary

Is something broken? Please open an issue!