Snackbar
The snackbar component is used to give feedback after certain actions.
The snackbar is used to show alerts on top of an overlay. The snackbar will close itself when the close button is clicked, or after a timeout — the default is 5 seconds.
Source
Theme source
@saas-ui/core
- 2.8.9 (latest)
Snackbars can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one snackbar onscreen at a time.
Snackbar is a wrapper around the useToast, with some additional features.
- Convenience methods
- Support for an action button
Import
import { useSnackbar } from '@saas-ui/react'
Usage
import { Button } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function SnackbarExample() {const snackbar = useSnackbar()return (<ButtononClick={() =>snackbar({title: 'Account created.',description: "We've created your account for you.",status: 'success',duration: 9000,isClosable: true,})}>Show Snackbar</Button>)}
Make sure to call
useSnackbar
at least one component level below the<SaasProvider>
or<ChakraProvider>
because it needs access to the current theme.
Convenience methods
Snackbar adds a bunch of convenience methods on top of the default useToast hook.
You can either pass a snackbar options object or simply a string, which is a shorthand for {title: '...'}
import { Button, HStack } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function SnackbarExample() {const snackbar = useSnackbar()return (<HStack spacing={4}><Button onClick={() => snackbar.info('Your account has been created.')}>Show Info</Button><ButtononClick={() => snackbar.success('Your account has been created.')}>Show Success</Button><ButtononClick={() => snackbar.error("Your account couldn't be created.")}>Show Error</Button><ButtononClick={() =>snackbar.promise(new Promise((resolve) => setTimeout(resolve, 1000)),{loading: 'Creating your account...',success: 'Your account has been created.',error: "Your account couldn't be created.",})}>Show Promise</Button></HStack>)}
Promise
Using the promise
method, you can show a loading state while waiting for a promise to resolve.
The success
and error
option accept an optional function that receives the resolved value or the error, respectively.
If error
is a function any errors thrown by the promise will be caught and passed to the function.
import { Button } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function SnackbarPromise() {const snackbar = useSnackbar()return (<ButtononClick={() =>snackbar.promise(new Promise((resolve) =>setTimeout(() => resolve({ name: 'Elliot' }), 1000)),{loading: 'Creating your account...',success: (data) =>`Welcome ${data.name}, your account has been created.`,error: (error) => {console.error(error)return "Your account couldn't be created."},})}>Show Promise</Button>)}
Action
import { Button } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function SnackbarExample() {const snackbar = useSnackbar()return (<ButtononClick={() =>snackbar.success({title: 'Email sent',description: 'The email has been sent',action: <Button variant="subtle">Undo</Button>,})}>Show Snackbar</Button>)}
Custom component
Display a custom component instead of the default Snackbar UI.
import { Button, Box } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function CustomSnackbarExample() {const snackbar = useSnackbar()return (<ButtononClick={() =>snackbar({position: 'bottom-left',render: () => (<Box color="white" p={3} bg="blue.500">Hello World</Box>),})}>Show Snackbar</Button>)}
Closing Snackbars
Snackbars can be closed imperatively, individually (via the close
instance
method) or all together (via the closeAll
instance method).
import { Button, Stack } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function ClosingSnackbarExample() {const snackbar = useSnackbar()const snackbarIdRef = React.useRef()function close() {if (snackbarIdRef.current) {snackbar.close(snackbarIdRef.current)}}function closeAll() {// you may optionally pass an object of positions to exclusively close// keeping other positions opened// e.g. `{ positions: ['bottom'] }`snackbar.closeAll()}function addSnackbar() {snackbarIdRef.current = snackbar({ description: 'some text' })}return (<Stack isInline spacing={2}><Button onClick={addSnackbar} type="button">Snackbar</Button><Button onClick={close} type="button" variant="outline">Close last snackbar</Button><Button onClick={closeAll} type="button" variant="outline">Close all snackbars</Button></Stack>)}
Updating Snackbars
Snackbars' options can be updated, by passing an id
and the new options
to the
update
instance method.
import { Button, Stack } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function UpdatingSnackbarExample() {const snackbar = useSnackbar()const snackbarIdRef = React.useRef()function update() {if (snackbarIdRef.current) {snackbar.update(snackbarIdRef.current, { description: 'new text' })}}function addSnackbar() {snackbarIdRef.current = snackbar({ description: 'some text' })}return (<Stack isInline spacing={2}><Button onClick={addSnackbar} type="button">Snackbar</Button><Button onClick={update} type="button" variant="outline">Update last snackbar</Button></Stack>)}
Status
You can use status
to change the color of your snackbars.
import { Button, Wrap, WrapItem } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function SnackbarStatusExample() {const snackbar = useSnackbar()const statuses = ['success', 'error', 'warning', 'info']return (<Wrap>{statuses.map((status, i) => (<WrapItem key={i}><ButtononClick={() =>snackbar({title: `${status} snackbar`,status: status,isClosable: true,})}>Show {status} snackbar</Button></WrapItem>))}</Wrap>)}
Variants
If you're using the Saas UI theme, Snackbar will automatically use the snackbar
variant by default.
You can also use variants of the
Alert
component.
import { Button, Wrap, WrapItem } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function SnackbarVariantsExample() {const snackbar = useSnackbar()const variants = ['snackbar', 'solid', 'subtle', 'left-accent', 'top-accent']return (<Wrap>{variants.map((variant, i) => (<WrapItem key={i}><ButtononClick={() =>snackbar({title: `${variant} snackbar`,variant: variant,isClosable: true,})}>Show {variant} snackbar</Button></WrapItem>))}</Wrap>)}
Custom container styles
The snackbar
function now exposes a containerStyle
property you can use to
override the default styles for the snackbar container.
import { Button } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function Example() {// Via instantiationconst snackbar = useSnackbar({position: 'top',title: 'Container style is updated',containerStyle: {width: '800px',maxWidth: '100%',},})// Or via trigger// Style here will overwrite the entire style abovereturn (<ButtononClick={() => {snackbar({containerStyle: {border: '20px solid red',},})}}>Click me to show snackbar with custom container style.</Button>)}
Changing the snackbar position
Using the position
prop you can adjust where your snackbar will be popup from.
import { Button, Wrap, WrapItem } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function PositionExample() {const snackbar = useSnackbar()const positions = ['top','top-right','top-left','bottom','bottom-right','bottom-left',]return (<Wrap>{positions.map((position, i) => (<WrapItem key={i}><ButtononClick={() =>snackbar({title: `${position} snackbar`,position: position,isClosable: true,})}>Show {position} snackbar</Button></WrapItem>))}</Wrap>)}
Preventing Duplicate Snackbar
In some cases you might need to prevent duplicate of specific snackbars. To achieve
you need to pass an id
and use the snackbar.isActive
method to determine when
to call snackbar(...)
.
import { Button } from '@chakra-ui/react'import { useSnackbar } from '@saas-ui/react'export default function PreventDuplicateExample() {const snackbar = useSnackbar()const id = 'test-snackbar'return (<ButtononClick={() => {if (!snackbar.isActive(id)) {snackbar({id,title: 'Hey! You can create a duplicate snackbar',})}}}>Click me!</Button>)}
Stand alone snackbar
You can use the createStandAloneSnackbar
function to create a stand alone snackbar, that can be used outside of the React context.
If you are using a custom theme, you need to pass it to the
createStandAloneSnackbar
arguments. This will prevent any shift in font size when a snackbar is opened.
import { createStandAloneSnackbar } from '@saas-ui/react'const { SnackbarContainer, snackbar } = createStandAloneSnackbar()export default function StandAloneSnackbarExample() {return (<><SnackbarContainer /><ButtononClick={() => {snackbar({title: 'Look ma, I am a stand alone snackbar!',})}}>Click me!</Button></>)}
Was this helpful?