🔔 react-notification-timeline

react-notification-timeline is a reactjs based component helps in managing the notifications in time-based manner. It is capable of keep tracking of the incoming notifications, manage read vs unread messages and allows many more customizations.

🔥 Why do you need this?

• 👉 Is your project is based on react js and you are looking for a time-based notification system?
• 👉 Do you want to keep track of the notifications in timed manner and manage them ?
• 👉 Do you want to structure the notifications in a cleaner way?
• 👉 Do you want to manage multi-line notifications?
• 👉 Do you limit the number of notifications you may want to see?

Then, you should give react-notification-timeline a try.

Here are some screen-shots

• Notification Component with the unread message count

• Notification Component with the messages as a pop-over

Live Demo

A Live demo of the component is available here, 💻 CLICK FOR DEMO

Many Thanks to all the Stargazers who has supported this project with stars(⭐)

⚒️ How to use?

Install

You can install react-notification-timeline using npm or yarn.

npm i react-notification-timeline

yarn add react-notification-timeline

Import

Once installed, it can be imported into a react component as,

import NotifyMe from 'react-notification-timeline';

Usage

Here is an example usage,

<NotifyMe
  data={data}
  storageKey='notific_key'
  notific_key='timestamp'
  notific_value='update'
  heading='Notification Alerts'
  sortedByKey={false}
  showDate={true}
  size={64}
  color="yellow"
  markAsReadFn={() => yourOwnFunctionHandler()}
/>

Properties

   {
     color:"yellow",
     backgroundColor:"#282828"
   }

   [
     {
       "update":"70 new employees are shifted",
       "timestamp":1596119688264
     },
     {
       "update":"Time to take a Break, TADA!!!",
       "timestamp":1596119686811
     }
   ]

🏷️ License

Copyright © 2020 by Tapas Adhikary

This project is licensed under MIT license.

⭐ Show your support

If you liked the work, please show your support by giving a Star!

✋ Contributions

I would love to get your feedback. Please use the github issues for submitting any feedback. At the same time, please join hands in improving the component further by fixing bugs, adding features.

People contributed so far (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!