API ReferenceComponents<Drawer.Item>

<Drawer.Item>

An item that can be dragged from a <Drawer>.

import { Puck, Drawer } from "@measured/puck"; export function Editor() { return ( <Puck> <Drawer> <Drawer.Item name="Orange" /> </Drawer> </Puck> ); }

Props

PropExampleTypeStatus
namename: "Orange"StringRequired
childrenchildren: () => <div />Function-
idid: "OrangeComponent"String-
isDragDisabledisDragDisabled: falseBoolean-

Required props

name

The name of this drawer item.

  • This will be rendered on the item by default.
  • Will be used as the id, unless otherwise specified

Optional props

children

A custom render function to render inside the component.

import { Puck, Drawer } from "@measured/puck"; export function Editor() { return ( <Puck> <Drawer> <Drawer.Item name="Orange">{() => <div>Orange 🍊</div>}</Drawer.Item> </Drawer> </Puck> ); }
Interactive Demo
Orange 🍊
Orange 🍊

Render Props

PropExampleType
childrenchildren: <div />String
children

The original node for the drawer item.

id

A unique id for this drawer item. Defaults to the value of name.

If using the <Drawer> as a component list to be dragged into <Puck.Preview>, this should be the key of a component defined in the Config.

isDragDisabled

Whether or not this item is disabled.