0.8.3 • Published 5 years ago
@shortcm/react-snackbar v0.8.3
React Button
A React version of an MDC Button.
Installation
npm install @material/react-snackbarUsage
Styles
with Sass:
import '@material/react-snackbar/index.scss';with CSS:
import '@material/react-snackbar/dist/snackbar.css';Javascript Instantiation
import React from 'react';
import Button from '@material/react-snackbar';
class MyApp extends React.Component {
render() {
return (
<Button>
Click Me!
</Button>
);
}
}Props
| Prop Name | Type | Description |
|---|---|---|
| message | String | Message to show in the snackbar |
| className | String | Classes to be applied to the root element. |
| timeoutMs | Number | Timeout in milliseconds when to close snackbar. |
| closeOnEscape | Boolean | Closes popup on "Esc" button if true. |
| actionText | String | Text for action button |
| leading | Boolean | Shows snackbar on the left if true (or right for rtl languages) |
| stacked | Boolean | Shows buttons under text if true |
| onBeforeOpen | Function() => void | Callback for handling event, which happens before opening |
| onOpen | Function(evt: Event) => void | Callback for handling event, which happens after opening |
| onBeforeClose | Function() => void | Callback for handling event, which happens before closing |
| onClose | Function() => void | Callback for handling event, which happens after closing |
Sass Mixins
Sass mixins may be available to customize various aspects of the Components. Please refer to the MDC Web repository for more information on what mixins are available, and how to use them.
Usage with Icons
Please see our Best Practices doc when importing or using icon fonts.