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

| Name | Type | Description | | --------- | -------- | ---------------------------------------------------------- | | action | string | Text to be displayed within action button of root element. | | className | string | Classes to be applied to the root element. | | dismiss | boolean | Enables dismiss icon to be displayed within root element. | | label | string | Text to be displayed within the root element. | | leading | boolean | Enables a leading variant. | | onClose | function | Close event handler. | | open | boolean | Indicates whether the element is open. | | stacked | boolean | Enables a stacked variant. |