Snackbar

Description

A component to inform the user of an action that has been performed by an app or will perform in the future.

System Dependencies

Installation

The package can be installed via npm:

npm install empower-display --save

Standard Snackbar

Configuration

import { SnackBar } from 'empower-display';

let [showSnackbar, setShowSnackbar] = useState(false)

<SnackBar duration={10} show={showSnackbar} onHide={(val) => setShowSnackbar(val)} icon={SVG_BADGE_PENDING}>
  <span>Dynamic Snackbar Content Here</span>
</SnackBar>

<button onClick={() => setShowSnackbar(true)}>Show Snackbar</button>

Properties

Parameter	Data Type	Constraint	Description

Parameter	Data Type	Constraint	Description
duration	Number	Required	Sets the duration of how long the snackbar will be visible in seconds.
show	Boolean	Required	Trigger the visibility of snackbar
onHide	Function	Required	A function to trigger once the snackbar disappears from the browser
icon	JSX Element	Optional	Add an icon inside the snackbar

References

Repository Link: https://bitbucket.org/empowerteams/empower-display

NPM Package: npm: empower-display

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git

Front End