material-ui-notifications

Material Design spec compliant notifciation implementation for the web. Inspired by https://github.com/puranjayjain/react-materialui-notifications

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
material-ui-notifications
0.1.45 years ago5 years agoMinified + gzip package size for material-ui-notifications in KB

Readme

Material-UI Notifications
https://nodei.co/npm/material-ui-notifications.png?downloads=true&downloadRank=true&stars=true
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, NotifcationContainer } 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!",
                }
            ); 
        }}
    />
 </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
The Project is Licensed under the MIT License