0.0.10 • Published 7 years ago
onio-react-notification v0.0.10
React redux notification
Komponenta pre vykreslenie flash message. Zdrojom dat je redux.
Instalacia
npm i -S @pjediny/react-notification
Integracia
Reducer
import { notificationReducer } from '@pjediny/react-notification';
const rootReducer = combineReducers({
notification: notificationReducer
});
export default rootReducer;
Routes
import Notifications from '@pjediny/react-notification';
export class Routes extends Component {
render() {
return (
<div>
<Notifications />
<Switch>
...
</Switch>
</div>
);
}
}
export default Routes;
SCSS Importovat SCSS z node_modules/@pjediny/react-notification/src/scss/_notifications.scss
Pouzitie
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { addSuccess, addError, addInfo, addWarning } from '@pjediny/react-notification';
import UserDatatable from './UserDatatable.jsx';
class Datatable extends Component {
constructor(props) {
super(props);
this.createNotification = this.createNotification.bind(this);
}
createNotification() {
this.props.actions.addSuccess('Info message', 'test', 1000);
this.props.actions.addError('Info message');
this.props.actions.addInfo('Info message');
this.props.actions.addWarning('Info message');
}
render() {
return (
<div className="animated fadeIn">
<button className="btn btn-info" onClick={this.createNotification}>
Info
</button>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-header"><i className="fa fa-align-justify"></i>Users</div>
<div className="card-block">
<UserDatatable />
</div>
</div>
</div>
</div>
</div>
);
}
}
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators({ addSuccess, addError, addInfo, addWarning }, dispatch)
});
export default connect(null, mapDispatchToProps)(Datatable);
License
MIT
0.0.10
7 years ago