Skip to content

snackbar

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

snackbar

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Snackbar.js
Snackbar.js
 
 
_config.scss
_config.scss
 
 
index.js
index.js
 
 
readme.md
readme.md
 
 
theme.scss
theme.scss
 
 

readme.md

Snackbar

Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.

This component is themeable under the key ToolboxSnackbar. You can check the configuration variables directly in Github.

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

Theming

Name Description
accept Added to the root element in case it's accept type.
active Added to the root element when its active.
button Used for the button inside the component.
cancel Added to the root element in case it's cancel type.
icon Used for the icon element.
label Used for the label element.
snackbar Used as the className for the root element of the component.
warning Added to the root element in case it's warning type.