react-notification-timeline
v0.0.9
Published
React Component to notify you and keep track of it as a timeline
Downloads
68
Readme
🔔 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 Componet with the unread message count
Notification Componet 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
[
{
"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!