{"id":17063633,"url":"https://github.com/atapas/notifyme","last_synced_at":"2025-04-09T16:06:02.864Z","repository":{"id":42256435,"uuid":"277147098","full_name":"atapas/notifyme","owner":"atapas","description":"react-notification-timeline is a react based component helps in managing the notification in time-based manner. ","archived":false,"fork":false,"pushed_at":"2023-03-05T04:33:11.000Z","size":788,"stargazers_count":130,"open_issues_count":17,"forks_count":41,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T16:05:56.837Z","etag":null,"topics":["greenroots-info","hactoberfest","notification","notifications","notifier","npm","npm-package","react","reactjs","timeline","timeline-component","timelines"],"latest_commit_sha":null,"homepage":"https://tapasadhikary.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atapas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["atapas"]}},"created_at":"2020-07-04T16:32:13.000Z","updated_at":"2025-02-22T00:44:11.000Z","dependencies_parsed_at":"2024-06-19T19:03:04.694Z","dependency_job_id":"fdae9de5-a2f3-4adb-85a2-85e59413c8e9","html_url":"https://github.com/atapas/notifyme","commit_stats":{"total_commits":64,"total_committers":7,"mean_commits":9.142857142857142,"dds":0.25,"last_synced_commit":"3baf53488bc85409fe553c913d8eab6564bf8171"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atapas%2Fnotifyme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atapas%2Fnotifyme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atapas%2Fnotifyme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atapas%2Fnotifyme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atapas","download_url":"https://codeload.github.com/atapas/notifyme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065289,"owners_count":21041871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["greenroots-info","hactoberfest","notification","notifications","notifier","npm","npm-package","react","reactjs","timeline","timeline-component","timelines"],"created_at":"2024-10-14T10:52:36.299Z","updated_at":"2025-04-09T16:06:02.823Z","avatar_url":"https://github.com/atapas.png","language":"JavaScript","funding_links":["https://github.com/sponsors/atapas"],"categories":[],"sub_categories":[],"readme":"# 🔔 react-notification-timeline\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n`react-notification-timeline` is a [reactjs](https://reactjs.org/) 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.\n\n# 🔥 Why do you need this?\n- 👉 Is your project is based on react js and you are looking for a time-based notification system? \n- 👉 Do you want to keep track of the notifications in timed manner and manage them ? \n- 👉 Do you want to structure the notifications in a cleaner way?\n- 👉 Do you want to manage multi-line notifications?\n- 👉 Do you limit the number of notifications you may want to see?\n\nThen, you should give `react-notification-timeline` a try. \n\n## Here are some screen-shots\n- Notification Component with the unread message count\n\n  \u003cimg src=\"./static/notification.png\" alt=\"notification \" /\u003e\n \n- Notification Component with the messages as a pop-over\n\n \u003cimg src=\"./static/screen.png\" alt=\"notification with messages\" width=\"400\" height=\"400\"\u003e\n\n## Live Demo\n[![Netlify Status](https://api.netlify.com/api/v1/badges/3817c2b7-a17f-4bfb-ad90-008c03a5a4da/deploy-status)](https://app.netlify.com/sites/notify-timeline/deploys) \n\nA Live demo of the component is available here, [💻 CLICK FOR DEMO](https://notify-timeline.netlify.app/) \n\n# Many Thanks to all the `Stargazers` who has supported this project with stars(⭐)\n\n[![Stargazers repo roster for @atapas/notifyme](https://reporoster.com/stars/atapas/notifyme)](https://github.com/atapas/notifyme/stargazers)\n\n# ⚒️ How to use?\n\n## Install\nYou can install `react-notification-timeline` using `npm` or `yarn`.\n\n```shell\nnpm i react-notification-timeline\n```\n\n```yarn\nyarn add react-notification-timeline\n```\n\n## Import\nOnce installed, it can be imported into a react component as,\n\n```js\nimport NotifyMe from 'react-notification-timeline';\n```\n\n## Usage\nHere is an example usage,\n\n```js\n\u003cNotifyMe\n  data={data}\n  storageKey='notific_key'\n  notific_key='timestamp'\n  notific_value='update'\n  heading='Notification Alerts'\n  sortedByKey={false}\n  showDate={true}\n  size={64}\n  color=\"yellow\"\n  markAsReadFn={() =\u003e yourOwnFunctionHandler()}\n/\u003e\n```\n\n### Properties\n\u003cdetails\u003e\u003csummary\u003eCLICK ME to know the details of the properties\u003c/summary\u003e\n\u003cp\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e \u003cb\u003eProperty\u003c/b\u003e \u003c/td\u003e \n    \u003ctd\u003e \u003cb\u003eDescription\u003c/b\u003e \u003c/td\u003e\n    \u003ctd\u003e \u003cb\u003eRequired\u003c/b\u003e \u003c/td\u003e\n    \u003ctd\u003e \u003cb\u003eExample\u003c/b\u003e \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e theme \u003c/td\u003e\n    \u003ctd\u003e customizing the background and foreground of the Notification and its icon\n    \u003c/td\u003e\n    \u003ctd\u003e No \u003c/td\u003e\n    \u003ctd\u003e\n      color and background color can be either in HexaCode,rgb or string name. Default is\n      \n\n   ```js\n      {\n        color:\"yellow\",\n        backgroundColor:\"#282828\"\n      }\n   ```\n   \n   \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e data \u003c/td\u003e\n    \u003ctd\u003e \n      Messages to show as notifications. This is expected to be an array of objects. Each of the object must have two properties.\n      \u003cul\u003e\n        \u003cli\u003e\u003cb\u003etimestamp:\u003c/b\u003e The timestamp of the time a message was generated. This must be a of a type long and represent a timestamp.\u003c/li\u003e\n        \u003cli\u003e\u003cb\u003eupdate:\u003c/b\u003e The message to show as notification.\u003c/li\u003e\n      \u003c/ul\u003e\n      Note: The keys names, timestamp and update can be customized as explained in other properties below.\n    \u003c/td\u003e\n    \u003ctd\u003e Yes \u003c/td\u003e\n    \u003ctd\u003e\n      \n   ```js\n      [\n        {\n          \"update\":\"70 new employees are shifted\",\n          \"timestamp\":1596119688264\n        },\n        {\n          \"update\":\"Time to take a Break, TADA!!!\",\n          \"timestamp\":1596119686811\n        }\n      ]\n   ```\n   \n   \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e heading \u003c/td\u003e\n    \u003ctd\u003e A header message for the Notification panel. Pass a message to customize it.\u003c/td\u003e\n    \u003ctd\u003e No \u003c/td\u003e\n  \u003ctd\u003e Any string of your choice. Default value is, \u003cb\u003eNotifications\u003c/b\u003e \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e multiLineSplitter \u003c/td\u003e\n    \u003ctd\u003e In case a notification message has to be splitted into multiple (bullet) items, you can specify a line splitter character in-between. \u003c/td\u003e\n    \u003ctd\u003e No \u003c/td\u003e\n    \u003ctd\u003e Any Character like, # or a sequence of characters, #$#. Default value is, \u003cb\u003e\\n\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n    \n  \u003ctr\u003e\n    \u003ctd\u003e notific_key \u003c/td\u003e\n    \u003ctd\u003e Key in the data property that holds the timestamp value. \u003c/td\u003e\n    \u003ctd\u003e Yes \u003c/td\u003e\n  \u003ctd\u003e \u003cb\u003etimestamp\u003c/b\u003e, \u003cb\u003eattime\u003c/b\u003e or any string based key name in the data property.\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e notific_value \u003c/td\u003e\n    \u003ctd\u003e key in the data property that holds the notification message value. \u003c/td\u003e\n    \u003ctd\u003e Yes \u003c/td\u003e\n    \u003ctd\u003e \u003cb\u003eupdate\u003c/b\u003e, \u003cb\u003emessage\u003c/b\u003e or any string based key name in the data property.\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e showDate \u003c/td\u003e\n    \u003ctd\u003e Notification message shows the date and time along with the message. Pass false for this property, if you do not want to show it. Pass true otherwise. \u003c/td\u003e\n    \u003ctd\u003e No \u003c/td\u003e\n    \u003ctd\u003e true or false. Default value is, \u003cb\u003efalse\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e size \u003c/td\u003e\n    \u003ctd\u003e Size of the notification bell. Pass a Size to customize it.\u003c/td\u003e\n    \u003ctd\u003e No \u003c/td\u003e\n    \u003ctd\u003e Size values as, 16, 32, 48 etc. Default value is, \u003cb\u003e32\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e sortedByKey \u003c/td\u003e\n    \u003ctd\u003e Pass true, if the data passed to this component is already sorted by time-based key. Pass false otherwise, the component will take care of the time based sorting. \u003c/td\u003e\n    \u003ctd\u003e No \u003c/td\u003e\n    \u003ctd\u003e true or false. Default value is, \u003cb\u003etrue\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e storageKey \u003c/td\u003e\n    \u003ctd\u003e It stores the last read message key in localstorage of the browser.\u003c/td\u003e\n    \u003ctd\u003e No \u003c/td\u003e\n    \u003ctd\u003e Any string of your choice as a key. Default value is, \u003cb\u003enotification_timeline_storage_id\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003e markAsRead \u003c/td\u003e\n    \u003ctd\u003e User can control the functionality of \"Mark All As Read\" by passing the function as prop as below\n    markAsReadFn = {() =\u003e yourOwnFunctionHandler()}\n    \u003c/td\u003e\n    \u003ctd\u003e No \u003c/td\u003e\n    \u003ctd\u003e Now \"Mark All As Read\" can be controlled by passing your own function as prop. Default functionality is, \n      \u003cul\u003e\n        \u003cli\u003e We will clear the notification count.\u003c/li\u003e\n        \u003cli\u003e Update the reactLocalStore with the latest notification key.\u003c/li\u003e\n        \u003cli\u003e We will set the readIndex to 0 - which is used to highlight the unread notifications.\u003c/li\u003e\n      \u003c/ul\u003e\n   \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd\u003e icon \u003c/td\u003e\n    \u003ctd\u003e User can add custom notification Icon by passing react-feather icon as prop as below icon={IconName} //You need to import the Icon from the react-feather library\n    \u003c/td\u003e\n    \u003ctd\u003e No \u003c/td\u003e\n    \u003ctd\u003e Any icon from the react-feather library default is Bell icon\n   \u003c/td\u003e\n  \u003c/tr\u003e\n  \n\u003c/table\u003e\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\n\n# 🏷️ License\nCopyright © 2020 by [Tapas Adhikary](https://tapasadhikary.com/)\n\nThis project is licensed under MIT license.\n\n# ⭐ Show your support\nIf you liked the work, please show your support by giving a Star!\n\n# ✋ Contributions\nI 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.\n\nPeople contributed so far ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://tapasadhikary.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/3633137?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTapas Adhikary\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-atapas\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/atapas/notifyme/commits?author=atapas\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/atapas/notifyme/commits?author=atapas\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/NagarjunShroff\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/37444771?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNagarjunShroff\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/atapas/notifyme/commits?author=NagarjunShroff\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://sankalpafernando.github.io/port/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/55610818?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSankalpa Fernando\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/atapas/notifyme/commits?author=SankalpaFernando\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/donymvarkey\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/31372381?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDony M Varkey\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/atapas/notifyme/commits?author=donymvarkey\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatapas%2Fnotifyme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatapas%2Fnotifyme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatapas%2Fnotifyme/lists"}