0.1.7 • Published 8 years ago
react-redux-notifier v0.1.7
react-redux-notifier
React-redux-notifier helps you show your own notification and customize them.
Installation
To install the stable version:
npm install --save react-redux-notifier
Add notifier to your project.
Add add Reducer to combineReducers function:
import { combineReducers } from 'redux';
import { Reducer } from 'react-redux-notifier';
export default combineReducers({
notifier: Reducer
})
Add Notifications to Component:
import React, { Component } from 'react';
import { Notifications } from 'react-redux-notifier';
export default class Demo extends Component {
render () {
return ( <Notifications nKey="some.key" /> );
}
}
Create and delete Notifications.
There are four kinds of notifications:
- NOTIFICATION_INFO
- NOTIFICATION_SUCCESS
- NOTIFICATION_WARNING
- NOTIFICATION_ERROR
And actions for create them:
- ADD_INFO(key, message, options)
- ADD_SUCCESS(key, message, options)
- ADD_WARNING(key, message, options)
- ADD_ERROR(key, message, options)
Also you can clear notification store:
- CLEAR_BY_KEY(key) - delete notification by key
- CLEAR() - clean the whole notifications store
Create and delete the notification:
export default class Demo extends Component {
componentWillMount() {
this.props.dispatch(ADD_INFO("demo.key", "It's info notification."));
this.props.dispatch(CLEAR_BY_KEY("demo.key"));
}
}
Also, you can specify OPTIONS like "hideAfter | ha" and "showAfter | sa":
this.props.dispatch(ADD_SUCCESS("demo.key.ha", "It's third info notification that will disappear after 3 seconds.", {ha: 3000}));
this.props.dispatch(ADD_WARNING("demo.key.sa", "It's third info notification that appear after 3 seconds.", {sa: 3000}));
Customization.
Set global settings for each kind of notification:
import { Actions, Kinds } from 'react-redux-notifier';
const CUSTOMIZE = Actions.CUSTOMIZE;
// or
import { CUSTOMIZE } from 'react-redux-notifier';
export default class Demo extends Component {
componentWillMount() {
this.props.dispatch(CUSTOMIZE({
kind: Kinds.NOTIFICATION_INFO,
className: "alert alert-info",
style: {'fontSize': '18px'}
}));
}
}
You can set global "className" and "style" for particular kind of notifications.
Notification Component.
Notification Component has several props like:
- nkey - that's key that you specify when to create an action.
- kind - that's a type of notification.
- style - style for notification.
- className - classes for notification.
- isUseDefSettings - specify if a component must use global settings (default = true).
- isShowMessage - specify if a component must show a message that you specify when to create an action (default = true).
<Notifications nkey="demo.key"
kind={Kinds.NOTIFICATION_ERROR}
style={{background: 'red'}}
className="error"
isUseDefSettings={false}/>
Nested components:
<Notifications nkey="demo.key"
kind={Kinds.NOTIFICATION_INFO}
isShowMessage={false}
>
<p>It is nested element.</p>
</Notifications>
Full example.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux';
import { createStore, compose, bindActionCreators, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import {
Row,
Col,
Navbar
} from 'react-bootstrap';
import {
Notifications,
Reducer,
Actions,
Kinds
} from 'react-redux-notifier';
/* ***** DEMO COMPONENT ***** */
class Demo extends Component {
constructor() {
super()
}
componentWillMount() {
this.props.actions.CUSTOMIZE({
kind: Kinds.NOTIFICATION_ERROR,
className: "alert alert-danger",
style: {'fontSize': '18px'}
});
this.props.actions.CUSTOMIZE({
kind: Kinds.NOTIFICATION_SUCCESS,
className: "alert alert-success"
});
this.props.actions.CUSTOMIZE({
kind: Kinds.NOTIFICATION_INFO,
className: "alert alert-info"
});
this.props.actions.CUSTOMIZE({
kind: Kinds.NOTIFICATION_WARNING,
className: "alert alert-warning"
});
this.props.actions.ADD_INFO("demo.key", "It's info notification.");
this.props.actions.ADD_ERROR("demo.key", "It's second info notification.");
this.props.actions.ADD_SUCCESS("demo.key.ha", "It's third info notification that will disappear after 3 seconds.", {ha: 3000});
this.props.actions.ADD_WARNING("demo.key.sa", "It's third info notification that appear after 3 seconds.", {sa: 3000});
}
render() {
return (
<div className="container">
<Navbar>
<Navbar.Header>
<Navbar.Brand>
React Redux Notifier
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
</Navbar>
<Row>
<Col xs={12}>
<Notifications nkey="demo.key"
kind={Kinds.NOTIFICATION_INFO}>
<p>It is nested element.</p>
</Notifications>
<Notifications nkey="demo.key"
kind={Kinds.NOTIFICATION_ERROR}
style={{background: 'red'}}
className="super"
isUseDefSettings={true}/>
<Notifications nkey="demo.key.ha"
kind={Kinds.NOTIFICATION_SUCCESS}/>
<Notifications nkey="demo.key.sa"
kind={Kinds.NOTIFICATION_WARNING}/>
</Col>
</Row>
</div>
);
}
}
function mapStateToProps(store, props) {
return {notifier: store.notifier};
}
function mapDispatchToProps(dispatch) {
return {actions: bindActionCreators(Actions, dispatch)};
}
const DemoDecorated = connect(mapStateToProps, mapDispatchToProps)(Demo);
/* ***** STORE ***** */
const createStoreWithMiddleware = compose(
applyMiddleware(thunk)
)(createStore);
const store = createStoreWithMiddleware(combineReducers({
notifier: Reducer
}));
/* ***** RENDER ***** */
ReactDOM.render(
<Provider store={store}>
<DemoDecorated />
</Provider>,
document.getElementById('demo')
)