<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

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

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.