@arterial/snackbar v3.0.0

Arterial Snackbar

Another React Material Snackbar

Installation

npm install @arterial/snackbar

Usage

Styles

Sass

@use "@material/snackbar/index.scss" as snackbar;
@include snackbar.core-styles;

CSS

import '@material/snackbar/dist/mdc.snackbar.css';

JSX

import {Snackbar} from '@arterial/snackbar';

Regular Snackbar

function Regular() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button label="Open" onClick={() => setOpen(true)} unelevated />
      <Snackbar
        label="Can't send photo. Retry in 5 seconds."
        onClose={() => setOpen(false)}
        open={open}
      />
    </>
  );
}

Other Variants

Dismiss

function Dismiss() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button label="Open" onClick={() => setOpen(true)} unelevated />
      <Snackbar
        dismiss
        label="Can't send photo. Retry in 5 seconds."
        onClose={() => setOpen(false)}
        open={open}
      />
    </>
  );
}

Action and Dismiss

function ActionDismiss() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button label="Open" onClick={() => setOpen(true)} unelevated />
      <Snackbar
        action="Retry"
        dismiss
        label="Can't send photo. Retry in 5 seconds."
        onClose={() => setOpen(false)}
        open={open}
      />
    </>
  );
}

Leading

function Leading() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button label="Open" onClick={() => setOpen(true)} unelevated />
      <Snackbar
        action="Retry"
        dismiss
        label="Can't send photo. Retry in 5 seconds."
        leading
        onClose={() => setOpen(false)}
        open={open}
      />
    </>
  );
}

Leading

function Stacked() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button label="Open" onClick={() => setOpen(true)} unelevated />
      <Snackbar
        action="Retry"
        dismiss
        label="Can't send photo. Retry in 5 seconds."
        onClose={() => setOpen(false)}
        open={open}
        stacked
      />
    </>
  );
}

Props

Snackbar