<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	-
`className`	`className: "MyClass"`	String	-
`collisionAxis`	`collisionAxis: "x"`	String	-
`disallow`	`disallow: ["HeadingBlock"]`	Array	-
`minEmptyHeight`	`minEmptyHeight: 256`	Number	-
`style`	`style: {display: "flex"}`	CSSProperties	-

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>
        );
      },
    },
  },
};

`className`

Provide a className to the DropZone component. The default DropZone styles will still be applied.

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

`collisionAxis`

Configure which axis Puck will use for overlap collision detection.

Options:

x - detect collisions based their x-axis overlap
y - detect collisions based their y-axis overlap
dynamic - automatically choose an axis based on the direction of travel

The defaults are set based on the CSS layout of the parent:

grid: dynamic
flex (row): x
inline/inline-block: x
Everything else: y

const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" collisionAxis="dynamic" />
          </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>
        );
      },
    },
  },
};

`minEmptyHeight`

The minimum height of the DropZone when empty, in pixels. Defaults to 128.

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

`style`

Provide a style attribute to the DropZone. The default DropZone styles will still be applied.

const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" style={{ display: "flex" }} />
          </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>