{"id":20871404,"url":"https://igorprado.github.io/react-notification-system/","last_synced_at":"2025-05-12T12:34:16.504Z","repository":{"id":31592631,"uuid":"35157449","full_name":"igorprado/react-notification-system","owner":"igorprado","description":"A complete and totally customizable component for notifications in React","archived":false,"fork":false,"pushed_at":"2024-01-30T15:55:36.000Z","size":4013,"stargazers_count":2450,"open_issues_count":62,"forks_count":249,"subscribers_count":39,"default_branch":"master","last_synced_at":"2024-10-29T15:10:58.892Z","etag":null,"topics":["javascript","notifications","react"],"latest_commit_sha":null,"homepage":"http://igorprado.github.io/react-notification-system/","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/igorprado.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2015-05-06T12:36:09.000Z","updated_at":"2024-10-28T10:46:45.000Z","dependencies_parsed_at":"2024-06-04T16:25:26.780Z","dependency_job_id":"73883de7-0f5e-4d75-b305-c798736d0093","html_url":"https://github.com/igorprado/react-notification-system","commit_stats":{"total_commits":226,"total_committers":32,"mean_commits":7.0625,"dds":"0.21238938053097345","last_synced_commit":"4954ae9ca3e76367cde619b6e3ca78fad046680c"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorprado%2Freact-notification-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorprado%2Freact-notification-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorprado%2Freact-notification-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorprado%2Freact-notification-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/igorprado","download_url":"https://codeload.github.com/igorprado/react-notification-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224120442,"owners_count":17259072,"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":["javascript","notifications","react"],"created_at":"2024-11-18T06:18:21.357Z","updated_at":"2024-11-18T06:20:39.788Z","avatar_url":"https://github.com/igorprado.png","language":"JavaScript","funding_links":[],"categories":["🧰 React Toolkit"],"sub_categories":["Notifications"],"readme":"# React Notification System\n\n[![npm version](https://badge.fury.io/js/react-notification-system.svg)](http://badge.fury.io/js/react-notification-system) [![npm](https://img.shields.io/npm/dm/react-notification-system.svg)](https://www.npmjs.com/package/react-notification-system) [![Dependency Status](https://david-dm.org/igorprado/react-notification-system.svg)](https://david-dm.org/igorprado/react-notification-system) [![devDependency Status](https://david-dm.org/igorprado/react-notification-system/dev-status.svg)](https://david-dm.org/igorprado/react-notification-system#info=devDependencies) [![Build Status](https://travis-ci.org/igorprado/react-notification-system.svg?branch=master)](https://travis-ci.org/igorprado/react-notification-system) [![Coverage Status](https://coveralls.io/repos/igorprado/react-notification-system/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/igorprado/react-notification-system?branch=master)\n\n\u003e A complete and totally customizable component for notifications in React.\n\n_Initially built for [Eterpret](http://dev.eterpret.com) @ [Scalable Path](http://www.scalablepath.com)._\n\n\u003ca href=\"https://igorprado.github.io/react-notification-system/\"\u003e\u003cimg width=\"728\" src=\"example/src/images/screenshot.jpg\" alt=\"Screenshot\"\u003e\u003c/a\u003e\n\n## Installing\n\nThis component is available as CommonJS and UMD module. Install via NPM running:\n\n```\nnpm install react-notification-system\n```\n\n### Important\n\nFor **React ^0.14.x** or **React ^15.x.x**, use version 0.2.x:\n\n```\nnpm install react-notification-system@0.2.x\n```\n\nFor **React 0.13.x**, use version 0.1.x:\n\n```\nnpm install react-notification-system@0.1.x\n```\n\n\n\n## Using\n\nFor optimal appearance, this component **must be rendered on a top level HTML element** in your application to avoid position conflicts.\n\nHere is a basic example. For a more advanced usage, please see the [example code](https://github.com/igorprado/react-notification-system/blob/master/example/src/scripts/App.jsx).\n\n\nClass-based components can also be used as follows\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport NotificationSystem from 'react-notification-system';\n\nexport default class MyComponent extends React.Component {\n  notificationSystem = React.createRef();\n\n  addNotification = event =\u003e {\n    event.preventDefault();\n    const notification = this.notificationSystem.current;\n    notification.addNotification({\n      message: 'Notification message',\n      level: 'success'\n    });\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={this.addNotification}\u003eAdd notification\u003c/button\u003e\n        \u003cNotificationSystem ref={this.notificationSystem} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nReactDOM.render(\n  React.createElement(MyComponent),\n  document.getElementById('app')\n);\n```\n\n## Methods\n\n### `addNotification(notification)`\n\nAdd a notification object. This displays the notification based on the [object](#creating-a-notification) you passed.\n\nReturns the notification object to be used to programmatically dismiss a notification.\n\n### `removeNotification(notification)`\n\nRemove a notification programmatically. You can pass an object returned by `addNotification()` or by `onAdd()` callback. If passing an object, you need to make sure it must contain the `uid` property. You can pass only the `uid` too: `removeNotification(uid)`.\n\n\n### `editNotification(notification, newProperties)`\n\nEdit a notification programmatically. You can pass an object previously returned by `addNotification()` or by `onAdd()` callback as `notification`. If passing an object as `notification`, you need to make sure it must contain the `uid` property. You can pass only the `uid` too: `editNotification(uid, newProperties)`.\n\n\n### `clearNotifications()`\n\nRemoves ALL notifications programatically.\n\n## Creating a notification\n\nThe notification object has the following properties:\n\n| Name         | Type            | Default   | Description                                                                                                                                                               |\n|------------  |---------------  |---------  |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------  |\n| title        | string          | null      | Title of the notification                                                                                                                                                 |\n| message      | string          | null      | Message of the notification                                                                                                                                              |\n| level        | string          | null      | Level of the notification. Available: **success**, **error**, **warning** and **info**                                                                                    |\n| position     | string          | tr        | Position of the notification. Available: **tr (top right)**, **tl (top left)**, **tc (top center)**, **br (bottom right)**, **bl (bottom left)**, **bc (bottom center)**  |\n| autoDismiss  | integer         | 5         | Delay in seconds for the notification go away. Set this to **0** to not auto-dismiss the notification                                                                      |\n| dismissible  | string          | both      | Settings controlling how the user can dismiss the notification and whether the dismiss button is visible. Available: **both (The disable button is visible and the user can click anywhere on the notification to dismiss)**, **click (The disable button is NOT visible and the user can click anywhere on the notification to dismiss)**, **button (The user can click on the disable button to dismiss the notifiction)**, **none (None [See more](#dismissible))**                                                                                                  |\n| action       | object          | null      | Add a button with label and callback function (callback is optional). [See more](#action)                                                                                                        |\n| children       | element,string          | null      | Adds custom content, and overrides `action` (if defined) [See more](#children)                                                                                                        |\n| onAdd | function | null | A callback function that will be called when the notification is successfully added. The first argument is the original notification e.g. `function (notification) { console.log(notification.title + 'was added'); }` |\n| onRemove     | function        | null      | A callback function that will be called when the notification is about to be removed. The first argument is the original notification e.g. `function (notification) { console.log(notification.title + 'was removed'); }` |\n| uid          | integer/string           | null      | Overrides the internal `uid`. Useful if you are managing your notifications id. Notifications with same `uid` won't be displayed. |\n\n\n### Dismissible\n\nIf set to 'none', the button will only be dismissible programmatically or after autoDismiss timeout. [See more](#removenotificationnotification)\n\n### Action\n\nAdd a button and a callback function to the notification. If this button is clicked, the callback function is called (if provided) and the notification is dismissed.\n\n```js\nnotification = {\n  [...],\n  action: {\n    label: 'Button name',\n    callback: function() {\n      console.log('Notification button clicked!');\n    }\n  }\n}\n\n```\n\n### Children\n\nAdd custom content / react elements\n\n```js\nnotification = {\n  [...],\n  children: (\n    \u003cdiv\u003e\n      \u003ch2\u003eHello World\u003c/h2\u003e\n      \u003ca\u003eAnchor\u003c/a\u003e\n    \u003c/div\u003e\n  )\n}\n\n```\n\n## Styles\n\nThis component was made to work as plug and play. For that, a handcrafted style was added to it and is used as inline CSS.\n\nYou can change this style by overriding the default inline styles or disable all inline styles and use your own styles.\n\n### Overriding\n\nFor this, use the `style` prop to pass an object with your styles. Your object must be something like this:\n\n```js\nvar style = {\n  NotificationItem: { // Override the notification item\n    DefaultStyle: { // Applied to every notification, regardless of the notification level\n      margin: '10px 5px 2px 1px'\n    },\n\n    success: { // Applied only to the success notification item\n      color: 'red'\n    }\n  }\n}\n\n\u003cNotificationSystem ref=\"notificationSystem\" style={style} /\u003e\n\n```\n\nRefer to [this file](https://github.com/igorprado/react-notification-system/blob/master/src/styles.js) to see what can you override.\n\n### Disabling inline styles\n\nTo disable all inline styles, just pass `false` to the prop `style`.\n\n```js\n\u003cNotificationSystem ref=\"notificationSystem\" style={false} /\u003e\n```\n\nHere is the notification HTML:\n\n```html\n\u003cdiv class=\"notifications-wrapper\"\u003e\n  \u003cdiv class=\"notifications-{position}\"\u003e \u003c!-- '{position}' can be one of the positions available: ex: notifications-tr --\u003e\n    \u003cdiv class=\"notification notification-{level} notification-{state} {notification-not-dismissible}\"\u003e \u003c!-- '{level}' can be: success | error | warning | info. '{state}' can be: visible | hidden. {notification-not-dismissible} is present if notification is not dismissible by user --\u003e\n      \u003ch4 class=\"notification-title\"\u003eDefault title\u003c/h4\u003e\n      \u003cdiv class=\"notification-message\"\u003eDefault message\u003c/div\u003e\n      \u003cspan class=\"notification-dismiss\"\u003e×\u003c/span\u003e\n      \u003cdiv class=\"notification-action-wrapper\"\u003e\n        \u003cbutton class=\"notification-action-button\"\u003eAction button\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n```\n\n#### Important\n\nUsing this method you have to take care of **every style**, from containers positions to animations. To control animations, use the classes `notification-visible` and `notification-hidden`. If your CSS styles will not handle any animation (transition), you need to set the prop `noAnimation` to `true` when adding the Notification System component:\n\n```js\n\u003cNotificationSystem ref=\"notificationSystem\" noAnimation={true} /\u003e\n```\n\nSee [#74](https://github.com/igorprado/react-notification-system/issues/74) for more details.\n\n### Appending/Prepending notifications\n\nYou can control where should new notification appear (on the top or bottom of current notifications, defaults to bottom) by setting `newOnTop` boolean prop on `\u003cNotificationSystem /\u003e` component:\n\n```js\n\u003cNotificationSystem ref=\"notificationSystem\" newOnTop={true} /\u003e\n```\n\nThis will render new notifications on top of current ones\n\n## Roadmap\n\n* Improve tests and coverage\n* Improve performance\n\n## Contributions\n\nClone this repo by running:\n\n```\ngit clone git@github.com:igorprado/react-notification-system.git\n```\n\nEnter the project folder and install the dependencies:\n\n```\nnpm install\n```\n\nTo start a development server and use the `example` app to load the component, type:\n\n```\nnpm start\n```\n\nOpen `http://localhost:8000`.\n\n---\n\nRun the tests:\n\n```\nnpm test\n```\n\nYou can find the coverage details under `coverage/` folder.\n\nAfter that, just edit the files under `src/` and `example/src/app.js`. It uses React hot reload.\n\nThis component is under construction. I will add more guidelines to who wants to contribute.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/igorprado.github.io%2Freact-notification-system%2F","html_url":"https://awesome.ecosyste.ms/projects/igorprado.github.io%2Freact-notification-system%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/igorprado.github.io%2Freact-notification-system%2F/lists"}