https://github.com/timohanisch/material-ui-notifications
Material Design spec compliant notifciation implementation for the web. Inspired by react-materialui-notifications
https://github.com/timohanisch/material-ui-notifications
component javascript jsx material-design material-ui notifications react web
Last synced: 10 months ago
JSON representation
Material Design spec compliant notifciation implementation for the web. Inspired by react-materialui-notifications
- Host: GitHub
- URL: https://github.com/timohanisch/material-ui-notifications
- Owner: TimoHanisch
- License: mit
- Created: 2017-12-14T15:30:17.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-03T16:10:27.000Z (about 8 years ago)
- Last Synced: 2025-08-06T09:54:12.607Z (11 months ago)
- Topics: component, javascript, jsx, material-design, material-ui, notifications, react, web
- Language: JavaScript
- Homepage:
- Size: 311 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Material-UI Notifications
[](https://www.npmjs.com/package/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](https://material.io/guidelines/patterns/notifications.html#notifications-anatomy-of-a-notification).
To implement the components we use [Material-UI](https://github.com/mui-org/material-ui) (< v1.0.0) and [React Flip Move](https://github.com/joshwcomeau/react-flip-move).
# Installation
To use all components you have to add `material-ui-notifications` to your dependencies.
**Yarn**
```bash
> yarn add material-ui-notifications
```
**npm**
```bash
> npm install -S material-ui-notifications
```
# Examples
**Simple usage of a notification**
```jsx
{ this.setState({ showNotification: false }); }}
title="Timo Hanisch"
text="Yeah this seems like a pretty good idea!"
/>
```
**Simple usage of a notification container**
```jsx
import { NotificationActions, NotificationContainer } from 'material-ui-notifications';
...
{
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
...
```
# Demo
To run the demo clone the repository and then run following commands. We use [Storybook](https://github.com/storybooks/storybook) to test
```bash
> yarn
> yarn storybook
```
# Documentation
The documentation for all components and functionalities can be found [here](/documentation/api.md)
# License
The Project is Licensed under the [MIT License](/LICENSE)