blackchalkv0.3.0
Components

Dropdown

SketchDropdown — a hand-drawn dropdown menu anchored to any trigger element.

SketchDropdown renders a rough.js panel below a trigger when clicked, and closes it on outside click. Pass any element as trigger and SketchListItem nodes as children.

Default

import { SketchDropdown } from "blackchalk";import { SketchButton } from "blackchalk";import { SketchListItem } from "blackchalk";<SketchDropdown trigger={<SketchButton>Options</SketchButton>}><SketchListItem onClick={() => alert("Edit")}>Edit</SketchListItem><SketchListItem onClick={() => alert("Duplicate")}>Duplicate</SketchListItem><SketchListItem onClick={() => alert("Delete")}>Delete</SketchListItem></SketchDropdown>

Props

PropTypeDefault
triggerReactNode
childrenReactNode

See it in the Storybook playground, or read the source.

On this page