react-delicious_toasts
v1.0.3
Published
React toasts-plugin that works with redux-thunk
Downloads
5
Readme
deliciousToasts - a simple react plugin
I've started a few weeks ago with react development. During playing in a real world app I came to the point where I've to show the user a notification. Through my previous projects I got to know and love toastr. I searched for an react implementation but nothing I've found was easy to understand or had few dependencies.
So I came up with the idea to implement notifications similar to toastr's own. Thanks to Robert Lyall's (@robertlyall) blog post, I found a good place to start. So this is the result of a bloody beginner in react. Maybe it'll help someone else out there.
Feel free to place pull requests or open issues :fire:
Implementation Guide
1. Installation
TODO
2. Add the styles
import the scss file into your project
import 'react-delicious_toasts/src/styles/deliciousToasts.scss';
3. Add the reducer
import { combineReducers } from 'redux';
import {reducer as deliciousToasts} from 'react-delicious_toasts';
// [...]
const appReducer = combineReducers(
{
// [...]
deliciousToasts, // <- Mounted at deliciousToasts
} );
// [...]
4. Add the container component into your app (root)
import React from "react";
import DeliciousToasts from 'react-delicious_toasts';
class App extends React.Component {
// [...]
render() {
return (
<div>
{/*[...]*/}
<DeliciousToasts />
{/*[...]*/}
</div>
)
}
}
export default App;
5. Dispatch an action from anywhere (with options)
import React from 'react';
import {connect} from 'react-redux';
import { createToastAction } from 'react-delicious_toasts';
const myFancyComponent = (props) => (
<div>
{/*[...]*/}
<button onClick={() => props.createToast()}>Hallo</button>
{/*[...]*/}
</div>
);
const mapDispatchToProps = (dispatch) => {
return {
createToast: (options) => {
dispatch(createToastAction(options));
}
}
};
export default connect((state) => {},mapDispatchToProps)(myFancyComponent);
toast options
Currently a toast has only a few options because I don't need more any for my use case. Feel free to add more.
const options = {
icon: null, // any react element | max-width & height 30px
color: "primary", // OPTIONAL any bootstrap bg-color
message: 'So tasty! ' + String.fromCodePoint( 0x1F60B ), // any message (optional with emoji-codes)
id: 12345 // OPTIONAL: If you want to delete your toast your from your application, you can set a manual ID here
}
Questions?
If you have any trouble or question feel free to open an issue :wink: