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: () => {} }
          }
        }
    />
}