Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@whatoplay/react-snackbar

0.10.0 • Public • Published

React Snackbar

A React version of an MDC Snackbar.

Installation

npm install @material/react-snackbar

Usage

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 Snackbar from '@material/react-snackbar';
 
class MyApp extends React.Component {
  render() {
    return (
      <Snackbar message="Click Me!" actionText="dismiss" />
    );
  }
}

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
onAnnounce Function() => void Callback for handling screenreader announce event
onOpening Function() => void Callback for handling event, which happens before opening
onOpen Function(evt: Event) => void Callback for handling event, which happens after opening
onClosing Function() => void Callback for handling event, which happens before closing
onClose Function() => void Callback for handling event, which happens after closing

Getting snackbar parameters

If you need to get the timeoutMs, closeOnEscape, or open value, then you can use a ref like so:

import React from 'react';
import Snackbar from '@material/react-snackbar';
 class MyApp extends React.Component {
  getSnackbarInfo = (snackbar) => {
    if (!snackbar) return;
    console.log(snackbar.getTimeoutMs());
    console.log(snackbar.isOpen());
    console.log(snackbar.getCloseOnEscape());
  }
  render() {
    return (
      <Snackbar
        message="Click Me!"
        actionText="dismiss"
        ref={this.getSnackbarInfo}
      />
    );
  }
}

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.

Advanced Sass Mixins

Usage with Icons

Please see our Best Practices doc when importing or using icon fonts.

Install

npm i @whatoplay/react-snackbar

DownloadsWeekly Downloads

0

Version

0.10.0

License

MIT

Unpacked Size

171 kB

Total Files

18

Last publish

Collaborators

  • avatar
  • avatar
  • avatar