<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" index={0} />
      </Drawer>
    </Puck>
  );
}

Props

Prop	Example	Type	Status
`name`	`name: "Orange"`	String	Required
`index`	`index: 0`	Number	Required
`children`	`children: () => <div />`	Function	-
`id`	`id: "OrangeComponent"`	String	-

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

`index`

A numerical index for each item in the drawer.

Must be sequential, i.e. 0, 1, 2.
Must start at 0.

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" index={0}>
          {() => <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.