React Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen

React Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action. More information at material-ui.com

Properties

NameTypeDescription
actionPropTypes.node

The label for the action on the snackbar.

autoHideDurationPropTypes.number

The number of milliseconds to wait before automatically dismissing. If no value is specified the snackbar will dismiss normally. If a value is provided the snackbar can still be dismissed normally. If a snackbar is dismissed before the timer expires, the timer will be cleared.

bodyStylePropTypes.object

Override the inline-styles of the body element.

classNamePropTypes.string

The css class name of the root element.

accontentStyletionPropTypes.object

TOverride the inline-styles of the content element.

messagePropTypes.node.isRequired

The message to be displayed.

(Note: If the message is an element or array, and the Snackbar may re-render while it is still open, ensure that the same object remains as the message property if you want to avoid the Snackbar hiding and showing again)

onActionTouchTapPropTypes.func

Fired when the action button is touchtapped.

onRequestClosePropTypes.func

Fired when the Snackbar is requested to be closed by a click outside the Snackbar, or after the autoHideDuration timer expires.

Typically onRequestClose 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 onRequestClose, for example ignoring clickaway.

openPropTypes.bool.isRequired

Controls whether the Snackbar is opened or not.

stylePropTypes.object

Override the inline-styles of the root element.

Test Summary

<Snackbar /> should show the next message after an updateTests didn't run
<Snackbar /> should show the latest message of consecutive updatesTests didn't run
<Snackbar /> prop: open should be hidden when open is falseTests didn't run
<Snackbar /> prop: open should be hidden when open is trueTests didn't run
<Snackbar /> prop: contentStyle should apply the style on the right elementTests didn't run