with-notification-system

Provides react-notification-system as a higher-order-component.

Installation

yarn add with-notifications-system

Usage

Check out the live documentation and the example directory

Quick-start

Wrap your app in a <NotificationSystemProvider />

// index.js
import { render } from 'react-dom';
import { withNotificationSystem } from 'with-notification-system';
import App from './App';
 
const rootElement = document.getElementById('root');
 
render(<NotificationSystemProvider><App /></NotificationSystemProvider>, rootElement);

Then anywhere you want a component to be able to create notifications

// SuccessButton.js
import React from 'react';
import { withNotifications } from 'with-notification-system';
 
export class SuccessButton extends React.Component {
  handleClick = () =>
    this.props.notification.add({ title: 'Success 🎉' });
 
  render() {
    return <button onClick={this.handleClick}>Succeed</button>
  }
}
 
export default withNotificationSystem(SuccessButton)

NotificationSystemProvider Props

Name	Type	Default	Description
className	string or undefined	'NotificationSystemProvider'	Provide an alternate class to the wrapping div which gets created
noAnimation	boolean	false	Disable animations
style	object	-	provide inline styles to override all css

Notification options

Check out react-notification-system for details on all of the options you can provide when creating a notification

Motivation

react-notification-system is awesome but it uses the react context system which tightly couples components and results in components which create notifications. By using a higher-order-component we can hide that implementation detail and provide the notification system via props. That means testing is a cinch and you can avoid some boilerplate 🎉.