Snackbar

Snackbar (also known as toasts) are used for brief notifications of processes that have been or will be performed.

The Snackbar component appears themporarily and floats above the UI to provide users with(non-critical) updates on an app’s processes. The demo below inspired by Google keep, shows a basic Snackbar with a text element and two actions:

Preview

Usage


import { Snackbar } from 'archi-ui'


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

Automatic dismiss

Use the autoHideDuration prop to automatically trigger the Snackbar’s onClose function after a set period of time (in milliseconds).

Preview

Customization

Use with Alerts

Use the Alert inside a Snackbar for messages that communicate a certain severity.

Preview

Snackbar with Action

To add the actions to the snackbar use action prop. If want to add multiple actions, use React.Fragment.

Preview

Positions

Use the anchorOrigin prop to control the snackbar’s position on the screen.

When displaying multiple consecutive snackbars using a single parent-rendered <Snackbar />, add the key prop to ensure independent treatment of each message. For instance, use <Snackbar key={message} />. Otherwise, messages might update in place, and features like autoHideDuration could be affected.

Preview

code


"use client"
 
import React, { useState } from 'react'
import { Button, IconButton, Snackbar } from 'archi-ui'
import { XIcon } from 'lucide-react';
 
export default function MyReactPage() {
  
  const [state, setState] = useState({
    open: false,
    vertical: 'bottom',
    horizontal: 'left',
    message: '',
  });
 
  const { vertical, horizontal, open, message } = state;
 
  const handleClick = (newState) => {
    setState({...newState, open: true});
  }
 
  const handleClose = () => {
    setState({...state, open: false});
  }
 
  return (
    <React.Fragment>
      <div className='flex flex-col items-center justify-center gap-2'>
        <div className='flex flex-wrap items-center justify-center gap-2'>
          <Button variant='filled' color='primary' onClick={() => handleClick({vertical: 'bottom', horizontal: 'left', message: 'Bottom left'})}>Bottom left</Button>
          <Button variant='filled' color='secondary' onClick={() => handleClick({vertical: 'bottom', horizontal: 'center', message: 'Bottom center'})}>Bottom Center</Button>
          <Button variant='filled' color='info' onClick={() => handleClick({vertical: 'bottom', horizontal: 'right', message: 'Bottom right'})}>Bottom right</Button>
        </div>
        <div className='flex flex-wrap items-center justify-center gap-2'>
          <Button variant='filled' color='warning' onClick={() => handleClick({vertical: 'top', horizontal: 'left', message: 'Top left'})}>Top left</Button>
          <Button variant='filled' color='success' onClick={() => handleClick({vertical: 'top', horizontal: 'center', message: 'Top center'})}>Top Center</Button>
          <Button variant='filled' color='error' onClick={() => handleClick({vertical: 'top', horizontal: 'right', message: 'Top right'})}>Top right</Button>
        </div>
      </div>
      <Snackbar
        key={message}
        open={open}
        message={message}
        onClose={handleClose}
        anchorOrigin={{ vertical, horizontal }}
        action={
          <IconButton onClick={handleClose} className='text-muted-foreground'>
            <XIcon />
          </IconButton>
        }
        autoHideDuration={6000}
        style={{ zIndex: 1000 }}
      />
    </React.Fragment>
  );
}

Snackbar API

API reference docs for the React Snackbar component.

Props

Name	Type	Default	Description
children	`node`	-	The content of the component.
className	`string`	-	Override or extend the styles applied to the component
open	`bool`	-	If true, the component is shown.
message	`node`	-	The message to display.
onClose	`func`	-	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. Signature: `function() => void`
autoHideDuration	`number`	`null`	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.
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' }`	`{ vertical:'bottom', horizontal:'left' }`	The anchor of the Snackbar. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored.
key	`any`	-	When displaying multiple consecutive snackbars using a single parent-rendered `<Snackbar />`, add the `key` prop to ensure independent treatment of each message. For instance, use `<Snackbar key={message} />`. Otherwise, messages might update in place, and features like `autoHideDuration` could be affected.