React Notifications Menu
IntroductionFeaturesPropsComponent Structure

Props

Name DescriptionTypeDefault
dataIt is array of objects consists of notification messages to be rendered.
Schema : {image, message ,detailPage, receivedTime}
string (URL) |Array | JSON[]
notificationCardCustom react component, either class component or functional component that can be render for every message instead of default one.React.Component | functionnull
classNamePrefixCustom CSS styles can be given by providing className prefix and including the respective file.string""
headerContent for header title ,option and its event.Object{title : 'Notifications', option: {text: 'Mark all as read',onClick: ()=>{}}
fetchDataFunction for fetching more data on pagination.functionnull
iconNotification icon can be provided as image.Imagebell
viewAllBtnView all option on bottom of notifications.
Schema : {text,onclick}
Objectnull
heightOverwrites the default height of the container.string | numbernull
widthOverwrites the default width of the container.string | numbernull
headerBackgroundColorBackground color for the header.stringnull
cardOptionWhether a default options on every message display or not.booltrue
markAsReadThis a function that renders on every card.functionnull
imagePositionTo decide position of image in card.stringleft

Data Example

import Notifications from "react-notifications-menu"
const App = ( ) =>{
const data = {[
{
image :'https://synergi-dev.s3.ap-southeast-1.amazonaws.com/profile-pictures/6b9.png' ,
message : 'Lorem ipsum dolor sit amet.',
detailPage : '/events',
receivedTime:'12h ago'
}
]}
return <Notifications data={data} />
}

Usage

import Notifications from "react-notifications-menu"
const App = ( ) =>{
const data = {[
{
image :'https://synergi-dev.s3.ap-southeast-1.amazonaws.com/profile-pictures/6b9.png' ,
message : 'Lorem ipsum dolor sit amet.',
detailPage : '/events',
receivedTime:'12h ago'
}
]}
return
<Notifications
data={data}
height='500px'
width='300px'
classNamePrefix='okrjoy'
cardOption={data => console.log(data)}
viewAllbtn={{ text: 'see all', linkTo: '/seeAll' }}
markAsRead={data => console.log(data)}
headerBackgroundColor = 'red'
header={
{
title: 'Notifications',
option: { text: 'View All', onClick: () => {} }
}
}
/>
}