material-notifications v0.8.0
Material Notifications
Javascript library that follows the Material Design Philosophy and allows use of Snackbar, Banners, and Alerts on your website.
Download package from npm
Todo
Snackbar
- Create components
- Create control function
- Add example of basic use for vanilla Javascript
- Add example of basic use for React Javascript
- Add example of basic use for React Typescript
- Create controlled components
- Add example of advanced use for React Javascript
- Add example of advanced use for React Typescript
- Add documentation to README.md
Banner
- Create components
- Create control function
- Add example of basic use for vanilla Javascript
- Add example of basic use for React Javascript
- Add example of basic use for React Typescript
- Create controlled components
- Add example of advanced use for React Javascript
- Add example of advanced use for React Typescript
- Add documentation to README.md
Alert
- Create components
- Create control function
- Add example of basic use for vanilla Javascript
- Add example of basic use for React Javascript
- Add example of basic use for React Typescript
- Create controlled components
- Add example of advanced use for React Javascript
- Add example of advanced use for React Typescript
- Add documentation to README.md
How to use
Vanilla
Download the library and add it to your html file.
<script src='./vanilla-material-notifications.js' />
Call notification functions.
snackbar({
type: 'plain',
position: 'bottomLeft',
message: 'Hello this is a plain message',
timeout: 3000
})
React
Add library to your project.
npm install material-notifications
or
yarn add material-notifications
Import plain functions.
import { snackbar } from 'material-notifications'
Call notification functions.
snackbar('Your message!', 'bottomLeft' 'info', 2000)
How to import and use components coming soon...
Philosophy
This library follows the Material Design outline for notifying a user of an event.
Snackbar
Message informing a user of some event with text. Can be dismissed early but requires no further action, and has different colors for level of message.
https://material.io/design/components/snackbars.html
Banner
Message the informing a user of some event with text. Must be dismissed manually by user but further action be taken while it is present.
https://material.io/design/components/banners.html#usage
Alert
Message informing a user of some event with text. Blocks all further action on the website until this action is acknowledged.