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

Prop	Example	Type	Status
`name`	`name: "Orange"`	String	Required
`children`	`children: () => <div />`	Function	-
`id`	`id: "OrangeComponent"`	String	-
`isDragDisabled`	`isDragDisabled: false`	Boolean	-

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 🍊

Render Props

Prop	Example	Type
`children`	`children: <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.