react-delicious_toasts v1.0.3

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: