React-notifier-system NPM

React Notifier System

An extension of react-notification-system for showing notifications with much simpler approach.

Installing

npm install react-notifier-system

Important

For complete documentation, please go to react-notification-system.

Using

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

import * as React from 'react'
import Notifier from 'react-notifier-system'

const App = class extends React.Component<{}> {
  addOrUpdateMyNotification = () => this.notifier.showNotification({
    message: 'My Notification',
    level: 'info',
    title: 'My Notification Title',
    id: 'mynotification',
  })

  addNotification = () => this.notifier.showNotification({
    message: 'New Notification',
    level: 'info',
    title: 'New Notification Title',
  })

  removeMyNotification = () => this.notifier.removeNotificationById('mynotification')

  notifier: any
  render() {
    return (
      <div>
        <Notifier ref={notifier => this.notifier = notifier} />
        <button onClick={this.addOrUpdateMyNotification}>Add or update my notification</button>
        <button onClick={this.removeMyNotification}>Remove my notification</button>
        <button onClick={this.addNotification}>Add new notification</button>
      </div>
    )
  }
}

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

Methods

`showNotification(notification)`

Add or update a notification object. This displays the notification based on the object you passed. It updates the notification if save id' found in current notification list, otherwise it adds this notification.