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:-
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.
colorScheme
prop that can receive either dark
or light
mode.
position
and offset
prop to position the popover relative to the Bell icon
header
, footer
and emptyState
prop to customize the header, footer and empty state of notification center.
NovuProvider
component can accept an optional i18n
prop.
i18n
prop can accept 2 different types of values
Supported Language
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)en
as the default value for i18nstyles
propstyles
prop can be used to cutomise styling of each component of notification center. Read more about styles prop
Customizing styles
@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