Material-UI Notifications

Material-UI Notification offers components and functionality to use a web version of the Material Desing notifications as seen in the Documentation.

To implement the components we use Material-UI (< v1.0.0) and React Flip Move.

Installation

To use all components you have to add material-ui-notifications to your dependencies.

Yarn

> yarn add material-ui-notifications

npm

> npm install -S material-ui-notifications

Examples

Simple usage of a notification

<Notification
    headerLabel="Mail"
    onClose={e => { this.setState({ showNotification: false }); }}
    title="Timo Hanisch"
    text="Yeah this seems like a pretty good idea!"
 />

Simple usage of a notification container

import { NotificationActions, NotificationContainer } from 'material-ui-notifications';
...
<div>
    <NotificationContainer />
    <button onClick={
        e => { 
            NotificationActions.addNotification(
                {
                    headerLabel: "Mail",
                    secondaryHeaderLabel: "timohanisch@googlemail.com",
                    timestamp: "Now",
                    primaryColor: "#ff0000",
                    title: "Timo Hanisch",
                    text: "Yeah this seems like a pretty good idea!",
                }
            ); 
        }}
    >
    Click me
    </button>
 </div>
...

Demo

To run the demo clone the repository and then run following commands. We use Storybook to test

> yarn

> yarn storybook

Documentation

The documentation for all components and functionalities can be found here

License