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