Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

snackbar

v4.9.10arrow_drop_down
v4.9.10
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
351
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
4 months 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.
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.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
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';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

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:

API:

Properties
NameTypeDescription
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.