snackbar

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

2,303

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

32 KB

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

React

Snackbar

UI Components

2 contributors

Install snackbar as a package?

Copied

npm i @bit/mui-org.material-ui.snackbar

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

The action to display. It renders after the message, at the end of the snackbar.

The anchor of the Snackbar.

The number of milliseconds to wait before automatically calling the onClose function. onClose should then set the state of the open prop to hide the Snackbar. This behavior is disabled by default with the null value.

Replace the SnackbarContent component.

Props applied to the ClickAwayListener element.

Props applied to the SnackbarContent element.

If true, the autoHideDuration timer will expire even if the window is not focused.

When displaying multiple consecutive Snackbars from a parent rendering a single , add the key prop to ensure independent treatment of each message. e.g. , otherwise, the message may update-in-place and features such as autoHideDuration may be canceled.

The message to display.

Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway.

Callback fired before the transition is entering.

Callback fired when the transition has entered.

Callback fired when the transition is entering.

Callback fired before the transition is exiting.

Callback fired when the transition has exited.

Callback fired when the transition is exiting.

If true, Snackbar is open.

The number of milliseconds to wait before dismissing after user interaction. If autoHideDuration prop isn’t specified, it does nothing. If autoHideDuration prop is specified but resumeHideDuration isn’t, we default to autoHideDuration / 2 ms.

The component used for the transition. Follow this guide to learn more about the requirements for this component.

The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

Props applied to the Transition element.

Demos:

Snackbars

API:

Snackbar API

Properties

Name	Type	Description
action	`node`	The action to display. It renders after the message, at the end of the snackbar.
anchorOrigin	`{"horizontal":"'center' \| 'left' \| 'right'","vertical":"'bottom' \| 'top'"}`	The anchor of the `Snackbar`.
autoHideDuration	`number`	The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value.
children	`element`	Replace the `SnackbarContent` component.
classes	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
ClickAwayListenerProps	`object`	Props applied to the `ClickAwayListener` element.
ContentProps	`object`	Props applied to the `SnackbarContent` element.
disableWindowBlurListener	`bool`	If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
key	`any`	When displaying multiple consecutive Snackbars from a parent rendering a single , add the key prop to ensure independent treatment of each message. e.g. , otherwise, the message may update-in-place and features such as autoHideDuration may be canceled.
message	`node`	The message to display.
onClose	`function`	The event source of the callback.
onEnter	`function`	Callback fired before the transition is entering.
onEntered	`function`	Callback fired when the transition has entered.
onEntering	`function`	Callback fired when the transition is entering.
onExit	`function`	Callback fired before the transition is exiting.
onExited	`function`	Callback fired when the transition has exited.
onExiting	`function`	Callback fired when the transition is exiting.
onMouseEnter	`function`
onMouseLeave	`function`
open	`bool`	If `true`, `Snackbar` is open.
resumeHideDuration	`number`	The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` prop isn’t specified, it does nothing. If `autoHideDuration` prop is specified but `resumeHideDuration` isn’t, we default to `autoHideDuration / 2` ms.
TransitionComponent	`elementType`	The component used for the transition. Follow this guide to learn more about the requirements for this component.
transitionDuration	`number \| {"appear":"number","enter":"number","exit":"number"}`	The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
TransitionProps	`object`	Props applied to the `Transition` element.