JarCasting
react-notification-system-redux
Wraps react-notification-system into a component and exposes actions and reducer.
Open for PR's and contributions!
Use versions below v2.0.0 for react versions lower than 16.
Demo & Examples
Live demo: gor181.github.io/react-notification-system-redux
To build the examples locally, run:
npm install
npm start
Then open localhost:8000 in a browser.
Installation via NPM
npm install react-notification-system-redux react-notification-system --save
Usage
Import the reducer and pass it to your store:
import {createStore, combineReducers} from 'redux';
import {reducer as notifications} from 'react-notification-system-redux';
export function configureStore(initialState = {}) {
return createStore(
combineReducers({
notifications
}),
initialState
);
}
Include the Notifications component and pass the data from the reducer by using connect:
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import ReactDOM from 'react-dom';
import Notifications from 'react-notification-system-redux';
class DemoComponent extends React.Component {
render() {
const {notifications} = this.props;
//Optional styling
const style = {
NotificationItem: { // Override the notification item
DefaultStyle: { // Applied to every notification, regardless of the notification level
margin: '10px 5px 2px 1px'
},
success: { // Applied only to the success notification item
color: 'red'
}
}
};
return (
<Notifications
notifications={notifications}
style={style}
/>
);
}
}
DemoComponent.contextTypes = {
store: PropTypes.object
};
DemoComponent.propTypes = {
notifications: PropTypes.array
};
export default connect(
state => ({ notifications: state.notifications })
)(DemoComponent);
Dispatch notification actions from any other component:
import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import Notifications, { success } from 'react-notification-system-redux';
const notificationOpts = {
// uid: 'once-please', // you can specify your own uid if required
title: 'Hey, it\'s good to see you!',
message: 'Now you can see how easy it is to use notifications in React!',
position: 'tr',
autoDismiss: 0,
action: {
label: 'Click me!!',
callback: () => alert('clicked!')
}
};
class OtherComponent extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.context.store.dispatch(
success(notificationOpts)
);
}
render() {
return (
<div>
<button onClick={this.handleClick}>
Spawn some notifications!!!
</button>
</div>
);
}
}
OtherComponent.contextTypes = {
store: PropTypes.object
};
export default OtherComponent;
There is a working example in example/src/**
Properties
It accepts all properties as react-notification-system does, actually it pipes them in the react-notification-system.
Actions
import Notifications from 'react-notification-system-redux';
dispatch(Notifications.show(notification, level));
dispatch(Notifications.success(notification));
dispatch(Notifications.error(notification));
dispatch(Notifications.warning(notification));
dispatch(Notifications.info(notification));
dispatch(Notifications.hide(uid)); // Hides notification based on uid
dispatch(Notifications.removeAll()); // Removes all notifications
// OR //
import { show, success, error, warning, info, hide, removeAll } from 'react-notification-system-redux';
dispatch(show(notification, level));
dispatch(success(notification));
dispatch(error(notification));
dispatch(warning(notification));
dispatch(info(notification));
dispatch(hide(uid)); // Hides notification based on uid
dispatch(removeAll()); // Removes all notifications
Development (src, lib and the build process)
NOTE: The source code for the component is in src. A transpiled CommonJS version (generated with Babel) is available in lib for use with node.js, browserify and webpack. A UMD bundle is also built to dist, which can be included without the need for any build system.
To build, watch and serve the examples (which will also watch the component source), run npm start. If you just want to watch changes to src and rebuild lib, run npm run watch (this is useful if you are working with npm link).
Thanks
Jed Watson for making react-component yo builder!
License
MIT Licensed
Copyright (c) 2016 Goran Udosic