DocsAPI 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 🍊

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.