SnackbarProvider

A snackbar provider to control the stacking of multiple snackbars in the app.

This component uses of the Notistack library. Please refer to its API Reference for more complex usage scenarios.

The provider is not meant to be 100% feature complete, but instead, ease the majority of use-cases we have been encountering. If you need any customization or extension to the behavior, please feel free to copy and customize it.

import {
  HvSnackbarProvider,
  useHvSnackbar,
} from "@hitachivantara/uikit-react-core";

After adding the provider at the root of your app, you can call the useHvSnackbar at any component inside your app. This hook will allow you to request the rendering of a snackbar through the use of the enqueueSnackbar function or close one with closeSnackbar.

export default function Demo() {
  return (
    <HvSnackbarProvider autoHideDuration={3000}>
      <div className="flex gap-sm">
        <SnackbarButton variant="success" />
        <SnackbarButton variant="warning" />
        <SnackbarButton variant="error" />
        <SnackbarButton variant="default" />
      </div>
    </HvSnackbarProvider>
  );
}


const SnackbarButton = ({ variant }: { variant: HvSnackbarVariant }) => {
  const { enqueueSnackbar, closeSnackbar } = useHvSnackbar();


  return (
    <HvButton
      variant="subtle"
      className="capitalize"
      onClick={() => {
        enqueueSnackbar(`This is a ${variant} snackbar.`, { variant });
      }}
    >
      {variant}
    </HvButton>
  );
};

export default function Demo() {
  return (
    <HvSnackbarProvider autoHideDuration={3000}>
      <div className="flex gap-sm">
        <SnackbarButton variant="success" />
        <SnackbarButton variant="warning" />
        <SnackbarButton variant="error" />
        <SnackbarButton variant="default" />
      </div>
    </HvSnackbarProvider>
  );
}

const SnackbarButton = ({ variant }: { variant: HvSnackbarVariant }) => {
  const { enqueueSnackbar, closeSnackbar } = useHvSnackbar();

  return (
    <HvButton
      variant="subtle"
      className="capitalize"
      onClick={() => {
        enqueueSnackbar(`This is a ${variant} snackbar.`, { variant });
      }}
    >
      {variant}
    </HvButton>
  );
};

Content

Internally, the HvSnackbarProvider uses the HvSnackbarContent to render the snackbar. You can use the snackbarContentProps to customize the content of the snackbar. Check the HvSnackbar documentation for more information.

export default function Demo() {
  return (
    <HvSnackbarProvider autoHideDuration={3000}>
      <SnackbarButton />
    </HvSnackbarProvider>
  );
}


const SnackbarButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useHvSnackbar();


  return (
    <HvButton
      variant="secondarySubtle"
      onClick={() => {
        const snackbarId = enqueueSnackbar("This is an action snackbar", {
          snackbarContentProps: {
            action: { id: "action", label: "Dismiss" },
            onAction: (evt, action) => {
              console.log("Clicked action", action);
              closeSnackbar(snackbarId);
            },
            showIcon: true,
            variant: "success",
          },
        });
      }}
    >
      Action
    </HvButton>
  );
};

export default function Demo() {
  return (
    <HvSnackbarProvider autoHideDuration={3000}>
      <SnackbarButton />
    </HvSnackbarProvider>
  );
}

const SnackbarButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useHvSnackbar();

  return (
    <HvButton
      variant="secondarySubtle"
      onClick={() => {
        const snackbarId = enqueueSnackbar("This is an action snackbar", {
          snackbarContentProps: {
            action: { id: "action", label: "Dismiss" },
            onAction: (evt, action) => {
              console.log("Clicked action", action);
              closeSnackbar(snackbarId);
            },
            showIcon: true,
            variant: "success",
          },
        });
      }}
    >
      Action
    </HvButton>
  );
};

Label

The snackbar label acceps a React.ReactNode which means you can pass any component as the label. This allows you to use the HvOverflowTooltip component to display a long message with ellipsis and a tooltip. Note, though, that you shouldn’t have long messages displayed in a snackbar as it is meant to be a ephemerous message that will be dismissed automically after a some time.

export default function Demo() {
  return (
    <HvSnackbarProvider autoHideDuration={3000}>
      <SnackbarButton />
    </HvSnackbarProvider>
  );
}


const SnackbarButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useHvSnackbar();


  return (
    <HvButton
      variant="subtle"
      onClick={() => {
        enqueueSnackbar(
          <HvOverflowTooltip
            paragraphOverflow
            data={`This is a very ${"very ".repeat(26)}long snackbar.`}
          />,
          { variant: "default" },
        );
      }}
    >
      Overflow
    </HvButton>
  );
};

export default function Demo() {
  return (
    <HvSnackbarProvider autoHideDuration={3000}>
      <SnackbarButton />
    </HvSnackbarProvider>
  );
}

const SnackbarButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useHvSnackbar();

  return (
    <HvButton
      variant="subtle"
      onClick={() => {
        enqueueSnackbar(
          <HvOverflowTooltip
            paragraphOverflow
            data={`This is a very ${"very ".repeat(26)}long snackbar.`}
          />,
          { variant: "default" },
        );
      }}
    >
      Overflow
    </HvButton>
  );
};

Snackbar Stack

SnackbarProvider

Content

Label

Related components