Components
Toast
SketchToast — a hand-drawn toast notification that auto-dismisses.
SketchToast renders a fixed-position rough.js card that auto-dismisses after
duration ms. It is controlled — pass visible and onClose to manage its state.
The companion useSketchToast hook wires up the state for you.
Default
import { useState } from "react";import { SketchToast, SketchButton } from "blackchalk";function Demo() {const [visible, setVisible] = useState(false);return ( <> <SketchButton onClick={() => setVisible(true)}>Show toast</SketchButton> <SketchToast message="Your draft has been published." visible={visible} onClose={() => setVisible(false)} duration={3000} /> </>);}Props
| Prop | Type | Default |
|---|---|---|
message | string | — |
visible | boolean | — |
onClose | () => void | — |
duration | number | 3000 |
See it in the Storybook playground, or read the source.