Learn how to customize the pre built notification center component partially or building your own notification center component from scratch using Novu provided hooks
<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:-
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.
To support dark mode in your application the notification center component can receive a colorScheme prop that can receive either dark or light mode.
Use header, footer and emptyState prop to customize the header, footer and empty state of notification center.
constHeader=()=>{return<span> My custom header </span>;};constFooter=()=>{return<span> My custom footer </span>;};constEmptyState=()=>{return<span> My custom empty state </span>;};<PopoverNotificationCenter colorScheme="dark" header={()=><Header/>} footer={()=><Footer/>} emptyState={<EmptyState/>}>{({ unseenCount })=><NotificationBellunseenCount={unseenCount}/>}</PopoverNotificationCenter>;
The i18n prop can accept 2 different types of values
2 letter language string
i18n ="en";
af (Afrikaans)
am (Amharic)
ar (Arabic)
as (Assamese)
az (Azerbaijani)
ba (Bashkir)
be (Belarusian)
bg (Bulgarian)
bh (Bihari)
bn (Bengali)
bs (Bosnian)
ca (Catalan)
cs (Czech)
da (Danish)
de (German)
el (Greek)
en (English)
es (Spanish)
eu (Basque)
fa (Farsi)
fi (Finnish)
fr (French)
ga (Irish)
gl (Galician)
gu (Gujarati)
he (Hebrew)
hi (Hindi)
hr (Croatian)
hu (Hungarian)
hy (Armenian)
id (Indonesian)
ig (Igbo)
it (Italian)
ja (Japanese)
ka (Kannada)
kk (Kazakh)
km (Khmer)
ko (Korean)
ku (Kurdish)
lo (Lao)
lt (Lithuanian)
lv (Latvian)
ml (Malayalam)
mr (Marathi)
ms (Malay)
nb (Norwegian)
ne (Nepali)
nl (Dutch)
or (Odia)
pa (Punjabi)
pl (Polish)
pt (Portuguese)
ro (Romanian)
ru (Russian)
sa (Sanskrit)
sd (Sindhi)
si (Sinhala)
sm (Samoan)
sq (Albanian)
sv (Swedish)
sq (Albanian)
ta (Tamil)
te (Telugu)
th (Thai)
tl (Tagalog)
tr (Turkish)
uk (Ukrainian)
ur (Urdu)
uz (Uzbek)
vi (Vietnamese)
zh (Chinese)
zu (Zulu)
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",},}}
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