0.9.2 • Published 7 years ago
with-notification-system v0.9.2
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 🎉.