LogoLogo
GitHub repository
GitHub repository
    Documentation
  • Overview
  • Getting Started

  • Guides

  • Hooks

    • useAnimationFrame
    • useMutationObserver
    • useSnackbar

  • Components

useSnackbar

Helper hook to show a Joy UI Snackbar.
Also includes the SnackbarProvider component, which needs to be mounted on the page.

Arguments

No arguments.

Returns

A Snackbar object with the following fields:
  • show: A function that shows a snackbar, taking as only argument a list of props to pass to the Snackbar component.
  • showSuccess: A function that shows a snackbar with a default success styling, taking a ReactNode (often a string) as argument.
  • showError: A function that shows a snackbar with a default error styling, taking a ReactNode (often a string) as argument.

Examples

Success or Error

1function SuccessOrError() {
2  const snackbar = useSnackbar();
3
4  return (
5    <Stack gap={2}>
6      <Button
7        color="success"
8        onClick={() => snackbar.showSuccess("You clicked the Success button!")}
9      >
10        Open Success
11      </Button>
12      <Button
13        color="danger"
14        onClick={() => snackbar.showError("You clicked the Error button!")}
15      >
16        Open Error
17      </Button>
18    </Stack>
19  );
20}
1function SuccessOrError() {
2  const snackbar = useSnackbar();
3
4  return (
5    <Stack gap={2}>
6      <Button
7        color="success"
8        onClick={() => snackbar.showSuccess("You clicked the Success button!")}
9      >
10        Open Success
11      </Button>
12      <Button
13        color="danger"
14        onClick={() => snackbar.showError("You clicked the Error button!")}
15      >
16        Open Error
17      </Button>
18    </Stack>
19  );
20}

Complex Customized Snackbar

1function ComplexCustomizedSnackbar() {
2  const snackbar = useSnackbar();
3
4  return (
5    <Button
6      onClick={() => snackbar.show({
7        children: "You clicked the button!",
8        color: 'primary',
9        size: 'lg',
10        anchorOrigin: {
11          vertical: 'top',
12          horizontal: 'center',
13        },
14        endDecorator: (
15          <Button
16            onClick={() => snackbar.showError("You clicked the new button!")}
17          >
18            Click me too!
19          </Button>
20        ),
21      })}
22    >
23      Click me!
24    </Button>
25  );
26}
1function ComplexCustomizedSnackbar() {
2  const snackbar = useSnackbar();
3
4  return (
5    <Button
6      onClick={() => snackbar.show({
7        children: "You clicked the button!",
8        color: 'primary',
9        size: 'lg',
10        anchorOrigin: {
11          vertical: 'top',
12          horizontal: 'center',
13        },
14        endDecorator: (
15          <Button
16            onClick={() => snackbar.showError("You clicked the new button!")}
17          >
18            Click me too!
19          </Button>
20        ),
21      })}
22    >
23      Click me!
24    </Button>
25  );
26}

See also

LogoLogo
Built with frontend-starter