react-toolbox-build4server
Version:
Builds react-toolbox in such a way that it's components can be required and used in node - most likely for server-side rendered webapps - without having to depend on webpack to build your entire server-side project
49 lines (41 loc) • 2 kB
Markdown
# Snackbar
Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.
<!-- example -->
```jsx
import { Button, Snackbar } from 'react-toolbox';
class SnackbarTest extends React.Component {
handleClick = () => {
this.refs.snackbar.show();
};
handleSnackbarClick = () => {
this.refs.snackbar.hide();
};
render () {
return (
<section>
<Button label='Show Snackbar' raised onClick={this.handleClick} />
<Snackbar
action='Nice'
icon='question_answer'
label='A new developer started using React Toolbox'
onClick={this.handleSnackbarClick}
ref='snackbar'
type='accept'
/>
</section>
);
}
}
```
## Properties
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `action` | `String` | | Label for the action component inside the Snackbar.|
| `active` | `Boolean` | `false` | If true, the snackbar will be active.|
| `className` | `String` | `''` | Additional class name to provide custom styling.|
| `icon` | `String` or `Element` | | String key for an icon or Element which will be displayed in left side of the snackbar.|
| `label` | `String` | | Text to display in the content. Required.|
| `onClick` | `Function` | | Callback function that will be called when the button action is clicked.|
| `onTimeout` | `Function` | | Callback function when finish the set timeout.|
| `timeout` | `Number` | | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
| `type` | `String` | | Indicates the action type. Can be `accept`, `warning` or `cancel`|