@licuido-ui/ui_snackbar NPM

Snackbar

Snackbars provide brief notifications. The component is also known as a toast.

Author

@author Vigneshwaran vigneshwaran@crayond.co

Link

Story Book Link stepper

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_snackbar

Import component

import { Snackbar } from '@licuido-ui/ui_snackbar';

Usage

<Snackbar message='' open={} />

Image

alt text

Sample Code

<Snackbar
  open={true}
  duration={60000}
  severity="success"
  message="Toast message here"
  anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
  backgroundColor=""
  width=""
  startIcon={<TickIcon />}
  endIcon={<CloseIcon />}
  fontSize=""
  fontWeight={400}
  fontColor=""
/>

Props

Name	Type	Default	Description
`className`	string		Additional CSS class for styling purposes.
`sx`	SxProps		The style object that customizes the appearance of the Snackbar.
`backgroundColor`	string		The background color of the Snackbar.
`width`	string		The width of the Snackbar.
`open`	boolean	`true`	Controls whether the Snackbar is visible.
`severity`	'error' or 'success' or 'warning' or 'info'	`'success'`	The severity of the alert.
`duration`	number	`60000`	The duration (in milliseconds) for which the Snackbar should be visible before automatically closing.
`handleClose`	() => void		Callback function to handle the close event.
`fontSize`	string		The font size of the message.
`fontWeight`	number or undefined	`400`	The font weight of the message.
`fontColor`	string		The font color of the message.
`message`	string	`'Toast message here'`	The message content of the Snackbar.
`startIcon`	React.ReactNode	`<TickIcon />`	The icon displayed at the start of the message.
`endIcon`	React.ReactNode	`<CloseIcon />`	The icon displayed at the end of the message.
`anchorOrigin`	{ vertical: 'top' or 'bottom'; horizontal: 'left' or 'center' or 'right' }	`{ vertical: 'top', horizontal: 'center' }`	The anchor position of the Snackbar.
`key`	string or undefined		A unique key to identify the Snackbar instance.

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

3.0.1

8 months ago