SheikhG1900/react-notifier-system

This extension is built on react-notification-system for having more control over notifications with much simple approach. The alternate of `editNotification` functionality.

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 same id' found in current notification list, otherwise it adds the notification. This only method can be used instead of using classic addNotification and editNotification methods.

removeNotificationById(notificationId)

Remove the notification by id.

Roadmap

• Redux implementation (done)