application/components/notification-bar.js

import React, {Component} from 'react';
import Snackbar from 'material-ui/Snackbar';
import {connect} from 'react-redux';

import {snackbarClose} from './../redux/actions/snackbar-actions';

class NotificationBar extends Component {
    constructor(props) {
        super(props);
    }

    handleRequestClose() {
        const {dispatch} = this.props;
        // just to update global state
        dispatch(snackbarClose());
    }

    render() {
        // moves the snackbar to the top
        const styles = {
            top: 0,
            left: '40%',
            bottom: 'auto',
            width: '100%',
            maxWidth: 'none',
            transform: this.props.snackbar.open ?
                'translate3d(0, 0, 0)' :
                'translate3d(0, -50px, 0)'
        };
        return (
            <Snackbar
                open={this.props.snackbar.open}
                message={this.props.snackbar.message}
                autoHideDuration={this.props.snackbar.duration ? this.props.snackbar.duration : 0}
                onRequestClose={this.handleRequestClose.bind(this)}
                style={styles}
            />
        );
    }
}

const mapStateToProps = (state) => ({
    snackbar: state.snackbar
});

export default connect(mapStateToProps)(NotificationBar);