blackchalk
Components

Modal

SketchModal — a hand-drawn dialog. Open it in the preview.

SketchModal is a controlled dialog: drive it with open and onClose. It closes on Escape. The preview below wires up the open/close state for you.

import { useState } from "react";import { SketchButton, SketchModal } from "blackchalk";function Example() {const [open, setOpen] = useState(false);return (  <>    <SketchButton variant="primary" onClick={() => setOpen(true)}>      Open modal    </SketchButton>    <SketchModal open={open} onClose={() => setOpen(false)} title="Delete sketch?">      <p>This can't be undone.</p>      <SketchButton variant="primary" onClick={() => setOpen(false)}>        Delete      </SketchButton>    </SketchModal>  </>);}

Props

PropTypeDefaultNotes
openbooleanRequired. Controls visibility.
onClose() => voidRequired. Fired on Escape/close.
titlestringOptional heading.

On this page