React Notification System

Last update: Jul 22, 2022

React Notification System

npm version npm Dependency Status devDependency Status Build Status Coverage Status

A complete and totally customizable component for notifications in React.

Initially built for Eterpret @ Scalable Path.

Screenshot

Installing

This component is available as CommonJS and UMD module. Install via NPM running:

npm install react-notification-system

Important

For React ^0.14.x or React ^15.x.x, use version 0.2.x:

npm install [email protected]

For React 0.13.x, use version 0.1.x:

npm install [email protected]

Using

For optimal appearance, this component must be rendered on a top level HTML element in your application to avoid position conflicts.

Here is a basic example. For a more advanced usage, please see the example code.

Class-based components can also be used as follows

import React from 'react';
import ReactDOM from 'react-dom';
import NotificationSystem from 'react-notification-system';

export default class MyComponent extends React.Component {
  notificationSystem = React.createRef();

  addNotification = event => {
    event.preventDefault();
    const notification = this.notificationSystem.current;
    notification.addNotification({
      message: 'Notification message',
      level: 'success'
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.addNotification}>Add notification</button>
        <NotificationSystem ref={this.notificationSystem} />
      </div>
    );
  }
}

ReactDOM.render(
  React.createElement(MyComponent),
  document.getElementById('app')
);

Methods

addNotification(notification)

Add a notification object. This displays the notification based on the object you passed.

Returns the notification object to be used to programmatically dismiss a notification.

removeNotification(notification)

Remove 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).

editNotification(notification, newProperties)

Edit 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).

clearNotifications()

Removes ALL notifications programatically.

Creating a notification

The notification object has the following properties:

Name Type Default Description
title string null Title of the notification
message string null Message of the notification
level string null Level of the notification. Available: success, error, warning and info
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)
autoDismiss integer 5 Delay in seconds for the notification go away. Set this to 0 to not auto-dismiss the notification
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)
action object null Add a button with label and callback function (callback is optional). See more
children element,string null Adds custom content, and overrides action (if defined) See more
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'); }
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'); }
uid integer/string null Overrides the internal uid. Useful if you are managing your notifications id. Notifications with same uid won't be displayed.

Dismissible

If set to 'none', the button will only be dismissible programmatically or after autoDismiss timeout. See more

Action

Add 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.

notification = {
  [...],
  action: {
    label: 'Button name',
    callback: function() {
      console.log('Notification button clicked!');
    }
  }
}

Children

Add custom content / react elements

notification = {
  [...],
  children: (
    <div>
      <h2>Hello World</h2>
      <a>Anchor</a>
    </div>
  )
}

Styles

This component was made to work as plug and play. For that, a handcrafted style was added to it and is used as inline CSS.

You can change this style by overriding the default inline styles or disable all inline styles and use your own styles.

Overriding

For this, use the style prop to pass an object with your styles. Your object must be something like this:

">
var style = {
  NotificationItem: { // Override the notification item
    DefaultStyle: { // Applied to every notification, regardless of the notification level
      margin: '10px 5px 2px 1px'
    },

    success: { // Applied only to the success notification item
      color: 'red'
    }
  }
}

<NotificationSystem ref="notificationSystem" style={style} />

Refer to this file to see what can you override.

Disabling inline styles

To disable all inline styles, just pass false to the prop style.

">
<NotificationSystem ref="notificationSystem" style={false} />

Here is the notification HTML:

Default title

Default message
×
">
<div class="notifications-wrapper">
  <div class="notifications-{position}"> 
    <div class="notification notification-{level} notification-{state} {notification-not-dismissible}"> 
      <h4 class="notification-title">Default titleh4>
      <div class="notification-message">Default messagediv>
      <span class="notification-dismiss">×span>
      <div class="notification-action-wrapper">
        <button class="notification-action-button">Action buttonbutton>
      div>
    div> div> div>

Important

Using 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:

">
<NotificationSystem ref="notificationSystem" noAnimation={true} />

See #74 for more details.

Appending/Prepending notifications

You can control where should new notification appear (on the top or bottom of current notifications, defaults to bottom) by setting newOnTop boolean prop on component:

">
<NotificationSystem ref="notificationSystem" newOnTop={true} />

This will render new notifications on top of current ones

Roadmap

  • Improve tests and coverage
  • Improve performance

Contributions

Clone this repo by running:

git clone [email protected]:igorprado/react-notification-system.git

Enter the project folder and install the dependencies:

npm install

To start a development server and use the example app to load the component, type:

npm start

Open http://localhost:8000.


Run the tests:

npm test

You can find the coverage details under coverage/ folder.

After that, just edit the files under src/ and example/src/app.js. It uses React hot reload.

This component is under construction. I will add more guidelines to who wants to contribute.

GitHub

https://github.com/igorprado/react-notification-system
Comments
  • 1. Have notifications powered exclusively through props

    It would be a nice feature to have that features could be controlled via props exclusively. I.e. the notification component takes a set of props that details the notifications that should be shown (keyed as well). This would allow for the control of the notifications via something upstream (like Flux) of the JSX component.

    Reviewed by raybooysen at 2015-11-18 21:14
  • 2. library incompatible with React 16

    Hi,

    I have been using the library in my codebase for few years, now I've upgraded to React 16 which incorporates checks for getDefaultProps and react.CreateClass methods prior to their deprecation.

    I am in fact seeing:

    Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named defaultProps instead.

    in my console, every time my top component gets re-rendered (it obviously includes NotificationSystem at its root)

    any chance you will be amending this?

    Reviewed by ramboInTheSky at 2018-03-19 16:29
  • 3. how do you utilize flux based actions to trigger notifications

    It'd be great for a simple demo of how to use redux with this system and utilizing actions to trigger the notifications. I'm still not sure how to accomplish this.

    Reviewed by mikedevita at 2015-10-26 02:17
  • 4. Usage with Alt (or other Flux implementations)

    Is it possible to add a feature for a shared reference to the notification system? Perhaps we could register this in the root application layer:

    <NotificationSystem shared="app" />

    Each time it were rendered, it would store its reactjs ref in a simple object in shared_notices.js:

    import shared_notices from 'react-notification-system/shared-notices'
    shared_notices.app.addNotification(
    

    The idea is to encourage component nesting. Creating good modular components often means there will be many of them and they will be nested often. It is better and easier to program to not have any requirements to pass redundant references. If you have an alternative please let me know.

    Reviewed by jcalfee at 2015-07-14 11:47
  • 5. [#64] enhance dismissible options

    I've implemented the suggestion in enhancement issue #64 (or at least my interpretation of it!) to enable finer control of dismissible behaviour.

    The dismissible prop of NotificationItem component will now accept:

    • 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 notification)
    • none (None)

    (It will also still accept true / false and behave in the same way as previously)

    I have also updated the examples and tests where appropriate.

    I'd really appreciate any feedback on this PR.

    Reviewed by thepeted at 2017-08-13 18:38
  • 6. Added prop-types package dependency, updated all compomponents to use…

    updated all components to use… prop-types lib instead of React.PropTypes, added create-react-class package dependency, updated all components to use it instead of React.createClasss

    Reviewed by qndrey at 2017-04-10 08:05
  • 7. Building example

    I've been looking at #10 and I'm trying to update and rebuild to the example to test but having some problems with var NotificationSystem = require('react-notification-system');. I can repoint it to require('../../dist/notification-system'); but will then complain that there are two copies of react on the page. Is there some browserify trick I'm missing?

    Reviewed by tristaaan at 2015-10-11 19:57
  • 8. Semver

    Have you thought about using semver?

    We had a problem in a project with this library as dependency, as 0.1.16 updated to React 0.14 and required react-dom. But our project still uses 0.13. The npm update / install automatically installed 0.1.16 as it was set to ^0.1.14.

    Reviewed by akohout at 2015-10-09 06:51
  • 9. Position in the middle of the screen?

    Hi everyone.

    When I glanced at the position options, I was sure it was possible to make notifications appear in the middle of the screen. But, when I went to change the position of the notifications that were in place, I got surprised to see these options missing.

    I propose the addition of the mc (middle center) option, and maybe mr (middle right) and ml (middle left) while we're at it.

    Depending on the implementation difficulty, it would be best to just be able to place them anywhere. But mc is definitely the most important missing option.

    Thanks in advance.

    Reviewed by GuiRitter at 2018-04-18 17:51
  • 10. Multiple Actions?

    Is it possible to add more than one action button to a notification? eg. On a notification that confirms deletion of an item: "Are you sure you want to delete this item? action 1: YES / action 2: NO".

    It doesn't look like this is currently possible, unless I'm missing something?

    Thanks

    Reviewed by ionofzion at 2015-09-15 08:21
  • 11. Migrate deprecated lifecycle methods

    @igorprado

    Are you still maintaining this repository?

    I'm using react-notification-system (Thanks!!) and have some issues to continue to use the package. React deprecates some lifecycle methods(componentWillMount and componentWillUpdate, and componentWillReceiveProps) and will remove these methods in v17, so we have to migrate the usage.

    There are some ways to migrate the usage like the following.

    • Apply #163 and migrate these methods
      • ref. https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
      • We can support old React versions by using react-lifecycle-compat
        • https://github.com/reactjs/react-lifecycles-compat
    • use Hooks instead of class components
      • This is a breaking change like this
        • https://github.com/igorprado/react-notification-system#important

    If you are ok, I'll work on this migration.

    Thanks!

    Reviewed by koba04 at 2019-10-04 04:45
  • 12. library incompatible with React 17

    I've recently updated my project to react 17.0.2 and seems that the library is not compatible. Are you planning to update compatibility to React 17?

    I have react-notification-system updated to verson 0.4.0

    Reviewed by detrash08 at 2021-04-07 10:52
  • 13. Releases tags

    Hi Igor, for GitHub the latest release of your module is 0.27.17 (as reported in the GitHub project page). But I see that 2 tags have been created in the past years: 0.3.0 and 0.4.0 (as reported by npm)

    Could you please check this?

    Thanks, Andrea

    Reviewed by ATrogolo at 2021-01-11 11:16
  • 14. Level is not working in editNotification

    Is there a way to have the notification color change in editNotification because level is not working in editNotification

    here is my code for addNotification which is working fine notify.addNotification({ title: "Message Request", message: some message, level: "info", dismissible: "button", autoDismiss: 60, action: null, });

    here is my code for editNotification, level is not working notify.editNotification(event, { title: "Accepted", message: "By another user", dismissible: "none", label: "success", action: null, level:'success' });

    Reviewed by smismailalam at 2020-10-21 15:31
  • 15. Add notification inside container

    Is there a way to have the notification popup inside a container div instead of just the entire page? It appears that the custom styles get applied to the notification-message class when I would need them applied to 'notification-tr' to affect the position of the notification itself. All else fails I can just add custom CSS to my app for '.notification-tr'.

    Reviewed by mdodge-ecgrow at 2020-02-18 17:43
  • 16. Support for IE 11

    It pains me to say that the CommonJS code of version 0.3.0 of this great lib is not compatible with IE 11 :(

    At least without post-processing code in node_modules.

    Reviewed by shestakov at 2019-11-29 15:00
React Notification System
 React Notification System

React Notification System A complete and totally customizable component for notifications in React. Initially built for Eterpret @ Scalable Path. Inst

Jul 22, 2022
React Toast Component - Custom push notification (Toast) implementation under React + stayed by TailwindCSS.
React Toast Component  - Custom push notification (Toast) implementation under React + stayed by TailwindCSS.

React Toast Component Online Demo Description This is custom toast component implemented by react hooks + React Context API and stayled using tailwind

Jul 14, 2022
React notification made easy 🚀 !
React notification made easy 🚀 !

React-Toastify ?? React-Toastify allows you to add notifications to your app with ease. No more nonsense! Installation $ npm install --save react-toas

Aug 7, 2022
Tiny React.js notification library (1kb gzip).

Simple-React-Notifications Tiny library (only 1kb gzip) that allows you to add notifications to your app. We don't want to blow up our bundle size bec

Aug 5, 2022
React component with HTML5 Web Notification API

React component with HTML5 Web Notification API. This component show nothing in dom element, but trigger HTML5 Web Notification API with render method in the life cycle of React.js.

Jul 10, 2022
react-notification-timeline is a reactjs based component helps in managing the notifications in time-based manner
react-notification-timeline is a reactjs based component helps in managing the notifications in time-based manner

?? react-notification-timeline react-notification-timeline is a reactjs based component helps in managing the notifications in time-based manner. It i

Jun 9, 2022
A lightweight react toast notification component. 11 kb ~
A lightweight react toast notification component. 11 kb ~

React Toast Component A lightweight react toast notification component. 11 kb ~ Preview: Demo (npm: NPM github: Github) Installation Prerequisite: Rea

Mar 26, 2022
Vue 3 notification library 💬
Vue 3 notification library 💬

This is a fork and port of Vue 2 vue-notifications created by euvl to now support Vue 3. If you're using Vue 2.x use his version.

Aug 3, 2022
:postbox: A simple and customizable React notifications system

Reapop A simple and customizable React notifications system Summary Compatibility Demo Installation Integration & usage With React & Redux With React

Jul 28, 2022
react-redux-toastr is a React toastr message implemented with Redux, primary consists of three things: a reducer, toastr emitter and a React component.
react-redux-toastr is a React toastr message implemented with Redux, primary consists of three things: a reducer, toastr emitter and a React component.

react-redux-toastr demo react-redux-toastr is a React toastr message implemented with Redux, primary consists of three things: a reducer, toastr emitt

Jul 21, 2022
This is a wrapper of the 'React' library 'React-Toastify' for usage in Shiny applications.
This is a wrapper of the 'React' library 'React-Toastify' for usage in Shiny applications.

shinyToastify This is a wrapper of the 'React' library 'React-Toastify' for usage in Shiny applications. Six available types: The toast container and

Apr 28, 2022
Beautiful, Zero Configuration, Toast Messages for React. Only ~ 4kb gzip, with styles and icons
Beautiful, Zero Configuration, Toast Messages for React. Only ~ 4kb gzip, with styles and icons

Cogo Toast Beautiful, Zero Configuration, Toast Messages for React ~4kb gzip (with styles and icons) https://cogoport.github.io/cogo-toast/ Install vi

Jul 29, 2022
Delightful and highly customisable React Component to notify your users
Delightful and highly customisable React Component to notify your users

react-notifications-component A delightful, easy to use and highly configurable component to help you notify your users out of the box. No messy setup

Aug 2, 2022
Minimal toast notifications for React.
Minimal toast notifications for React.

React Toast Minimal toast notifications for React. Get started Quick start Install with yarn yarn add react-toast Install with NPM npm install react-t

Jul 19, 2022
Smoking hot React Notifications 🔥

Smoking hot Notifications for React. Lightweight, customizable and beautiful by default. Website · Documentation · Twitter Cooked by Timo Lins ??‍?? F

Aug 7, 2022
A performant and comprehensive React sticky component.

A sticky component wraps a sticky target and keeps the target in the viewport as the user scrolls the page. Most sticky components handle the case where the sticky target is shorter than the viewport, but not the case where a sticky target is taller than the viewport

Aug 7, 2022
Small library for notifying react components.

Small library for notifying react components. Sometimes you need to notify another components about some event that happens in application. With this library you are able to notify components also from redux.

Jul 20, 2022
Spec compliant notifications for react and material ui users

react-materialui-notifications ❤️ the package? Then ⭐ it! Spec compliant notifications for react and material ui users Installation Use the latest git

Jan 6, 2022
sAlert is a React component which provides alerts or notifications with rich configuration possibilities.

This lib is no longer maintained. It needs major adjustments and rewrites. I hope I'll find some time for it in the future. Sorry. React sAlert compon

Jul 19, 2022