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:
;;{return;}
Include the Notifications component and pass the data from the reducer by using connect
:
;;;;Component{const notifications = thisprops;//Optional stylingconst style =NotificationItem: // Override the notification itemDefaultStyle: // Applied to every notification, regardless of the notification levelmargin: '10px 5px 2px 1px'success: // Applied only to the success notification itemcolor: 'red';return<Notificationsnotifications=notificationsstyle=style/>;}DemoComponentcontextTypes =store: PropTypesobject;DemoComponentpropTypes =notifications: PropTypesarray;notifications: statenotificationsDemoComponent;
Dispatch notification actions from any other component:
;;;const notificationOpts =// uid: 'once-please', // you can specify your own uid if requiredtitle: 'Hey, it\'s good to see you!'message: 'Now you can see how easy it is to use notifications in React!'position: 'tr'autoDismiss: 0action:label: 'Click me!!';Component{super;thishandleClick = thishandleClick;}{thiscontextstore;}{return<div><button onClick=thishandleClick>Spawn some notifications!!!</button></div>;}OtherComponentcontextTypes =store: PropTypesobject;;
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
;;;;;;; // Hides notification based on uid; // Removes all notifications// OR //;;;;;;; // Hides notification based on uid; // Removes all notifications
src
, lib
and the build process)
Development (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