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

snackbar

v3.9.2arrow_drop_down
v3.9.2
STATUS
Passing
DOWNLOADS
219
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
7 months ago
SIZE
28 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.
1 contributor
Use snackbar in your project ?
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
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';
revert changes
reload
toggle layout
maximize
modifieddraft
withStyles(styles2)(
  CustomizedSnackbars
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
withStyles(styles2)(
  CustomizedSnackbars
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right
Properties
NameTypeDefault valueDescription
action
node

The action to display.

anchorOrigin
{"horizontal":"'left' | 'center' | 'right'","vertical":"'top' | 'bottom'"}{ vertical: 'bottom', horizontal: 'center', }

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

Properties applied to the ClickAwayListener element.

ContentProps
object

Properties applied to the SnackbarContent element.

disableWindowBlurListener
boolfalse

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 <Snackbar/>, add the key property to ensure independent treatment of each message. e.g. <Snackbar key={message} />, 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 property isn’t specified, it does nothing. If autoHideDuration property is specified but resumeHideDuration isn’t, we default to autoHideDuration / 2 ms.

TransitionComponent
customSlide

The component used for the transition.

transitionDuration
number | {"enter":"number","exit":"number"}{ enter: duration.enteringScreen, exit: duration.leavingScreen, }

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

TransitionProps
object

Properties applied to the Transition element.