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. |