API ReferenceFieldsSlot

Slot

Define a drag-and-drop area containing nested components. Extends Base.

This field produces an array of ComponentData
The array is transformed to a render function before being provided to render()

This field does render any UI in the form section.

Interactive Demo

Example


const config = {
  components: {
    Example: {
      fields: {
        content: {
          type: "slot",
        },
      },
      render: ({ content: Content }) => {
        return <Content />;
      },
    },
    Card: {
      render: () => <div>Hello, world</div>,
    },
  },
};

TypeScript

When using TypeScript, make sure to use the Slot type so the render prop is correctly transformed.


import { Slot } from "@measured/puck";
 
type Props = {
  Example: {
    content: Slot; // Converted from the ComponentData[] type into a render function
  };
};

Params

Param	Example	Type	Status
`type`	`type: "slot"`	”slot”	Required
`allow`	`allow: ["HeadingBlock"]`	Array	-
`disallow`	`disallow: ["HeadingBlock"]`	Array	-

Required params

`type`

The type of the field. Must be "slot" for Slot fields.


const config = {
  components: {
    Example: {
      fields: {
        content: {
          type: "slot",
        },
      },
      // ...
    },
  },
};

Optional params

`allow`

Only allow specific components to be dragged into the slot. Will be overwritten by the allow prop provided to the render function.


const config = {
  components: {
    Example: {
      fields: {
        content: {
          type: "slot",
          allow: ["HeadingBlock"],
        },
      },
      // ...
    },
  },
};

`disallow`

Allow all but specific components to be dragged into the slot. Any items in allow will override disallow. Will be overwritten by the disallow prop provided to the render function.


const config = {
  components: {
    Example: {
      fields: {
        content: {
          type: "slot",
          disallow: ["HeadingBlock"],
        },
      },
      // ...
    },
  },
};

Render function

Slot data is provided to render() as a render function (or component). Provide props to this function to customize the behavior of the slot at render-time.

Param	Example	Type	Status
`allow`	`allow: ["HeadingBlock"]`	Array	-
`className`	`className: "MyClass"`	String	-
`collisionAxis`	`collisionAxis: "x"`	String	-
`disallow`	`disallow: ["HeadingBlock"]`	Array	-
`minEmptyHeight`	`minEmptyHeight: 256`	Number	-
`ref`	`ref: ref`	Ref	-
`style`	`style: {display: "flex"}`	CSSProperties	-

`allow`

Only allow specific components to be dragged into the slot. Overrides the allow parameter provided to the field.


const config = {
  components: {
    Example: {
      render: ({ content: Content }) => {
        return <Content allow={["HeadingBlock"]} />;
      },
    },
  },
};

`className`

Provide a className to the rendered element. The default styles will still be applied.


const config = {
  components: {
    Example: {
      render: ({ content: Content }) => {
        return <Content className="MyComponent" />;
      },
    },
  },
};

`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: ({ content: Content }) => {
        return <Content collisionAxis="dynamic" />;
      },
    },
  },
};

`disallow`

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


const config = {
  components: {
    Example: {
      render: ({ content }) => {
        return <Content disallow={["HeadingBlock"]} />;
      },
    },
  },
};

`minEmptyHeight`

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


const config = {
  components: {
    Example: {
      render: () => {
        return <Content minEmptyHeight={256} />;
      },
    },
  },
};

`ref`

A React ref, assigned to the root node of the slot.


const config = {
  components: {
    Example: {
      render: ({ content: Content }) => {
        const ref = useRef();
 
        return <Content ref={ref} />;
      },
    },
  },
};

`style`

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


const config = {
  components: {
    Example: {
      render: ({ content: Content }) => {
        return <Content style={{ display: "flex" }} />;
      },
    },
  },
};

Select

Text