# @material/react-snackbar

> Material Components React Snackbar

Latest version **0.15.0** (published 2019-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @material/react-snackbar
pnpm add @material/react-snackbar
yarn add @material/react-snackbar
bun add @material/react-snackbar
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.15.0 |
| Published | 2019-07-22 |
| First published | 2019-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 107 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | abhiomkar, acdvorak, aprigogin, azakus, bicknellr, bonniez, bwobrien, kfranqueiro, lynnjepsen, material-admin, moog16, patrickrodee, williamernest |
| Keywords | mdc web react, material components react, material design, material snackbar, materialsnackbar |

## Links

- npm: https://www.npmjs.com/package/@material/react-snackbar
- Repository: https://github.com/material-components/material-components-web-react
- Homepage: https://github.com/material-components/material-components-web-react#readme
- Issues: https://github.com/material-components/material-components-web-react/issues
- npm.io page: https://npm.io/package/@material/react-snackbar

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@material/snackbar](https://npm.io/package/@material/snackbar.md) ^1.0.0

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 0.15.0 (latest) — 2019-07-22
- 0.14.1 — 2019-07-02
- 0.14.0 — 2019-06-25
- 0.13.0 — 2019-05-30
- 0.12.0 — 2019-05-01
- 0.11.0 — 2019-03-19
- 0.10.0 — 2019-02-19

## README

# React Snackbar

A React version of an [MDC Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar).

## Installation

```
npm install @material/react-snackbar
```

## Usage

### Styles

with Sass:
```js
import '@material/react-snackbar/index.scss';
```

with CSS:
```js
import '@material/react-snackbar/dist/snackbar.css';
```

### Javascript Instantiation
```js
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
reason | String | Passed as argument when snackbar closes programatically
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:

```js
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](https://github.com/material-components/material-components-web/blob/master/packages/mdc-snackbar/README.md#sass-mixins)

## Usage with Icons

Please see our [Best Practices doc](../../docs/best-practices.md#importing-font-icons) when importing or using icon fonts.

---
_Source: https://npm.io/package/@material/react-snackbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._