<DropZone>

Place droppable regions (zones) inside other components to enable nested components.

import { DropZone } from "@measured/puck";
 
const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" />
          </div>
        );
      },
    },
  },
};

Props

Param	Example	Type	Status
`zone`	`zone: "my-zone"`	String	Required
`allow`	`allow: ["HeadingBlock"]`	Array
`disallow`	`disallow: ["HeadingBlock"]`	Array

Required props

`zone`

Set the zone identifier for the given DropZone.

Must be unique within this component, but two different components can both define DropZones with the same zone value.

const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" />
          </div>
        );
      },
    },
  },
};

Optional props

`allow`

Only allow specific components to be dragged into the DropZone:

const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" allow={["HeadingBlock"]} />
          </div>
        );
      },
    },
  },
};

`disallow`

Allow all but specific components to be dragged into the DropZone. Any items in allow will override disallow.

const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" disallow={["HeadingBlock"]} />
          </div>
        );
      },
    },
  },
};

Restrictions

You can't drag between DropZones that don't share a parent component.

React server components

By default, DropZones don't work with React server components as they rely on context.

Instead, you can use the renderDropZone method passed to your component render function.

<Drawer.Item><FieldLabel>