react-redux-alerts

#react-redux-alerts

Installation

npm i react-redux-form --save

The Gist

A redux based alert system designed for creating resuable alerts across your application.

// Alert.js

import React from 'react';
import { createAlert } from 'react-redux-alerts';

/** 
 * This is a wrapper method that connects your alert to the store based on a alertName key. This will be the unique identifier that will allow you to both show the alert and dismiss the alert. 
 */

const MyAlert = () -> (
        <div>
            This is my custom alert message.
        </div>
    );

export default createAlert({
    alertName: 'myAlert'
    })(MyAlert);

This wrapped component can then be pluged into any container that you want the alert to show up in.

// MyContainer.js

import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actions as alertActions } from 'react-redux-alerts';
import MyAlert from './Alert';

class MyContainer extends Component {
    render() {
        return(
                <div>
                    This is my custom container.
                    <Alert />
                    <button onClick={() => this.props.createAlert('myAlert')}
                        Create Alert!
                    </button>
                    <button onClick={() => this.props.dismissAlert('myAlert')}
                        Dismiss Alert!
                    </button>
                </div>
            )
    }
}

function mapDispatchToProps(dispatch) {
  return { alerts: bindActionCreators(alertActions, dispatch) };
}

export default connect(mapStateToProps, mapDispatchToProps)(MyContainer);

Using the react-redux-alert actions, you can dismiss or create notifications by passing the appropriate key to the action.