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 "@puckeditor/core";
 
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	-
`as`	`as: "span"`	ElementType	-
`className`	`className: "MyClass"`	String	-
`collisionAxis`	`collisionAxis: "x"`	String	-
`disallow`	`disallow: ["HeadingBlock"]`	Array	-
`minEmptyHeight`	`minEmptyHeight: "256px"`	CSSProperties[“minHeight”] \| 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.

Drag-and-drop in the outline does not respect this prop. Prefer the allow field parameter, which is enforced everywhere.

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

`as`

Render a custom element or component for the slot.

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

Any additional props are forwarded to the element or component provided via as.

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

The following props are not forwarded to the as element, because Puck either consumes them internally or they are incompatible with slots:

Prop	Reason
`zone`	Identifies the drop zone internally
`content`	Injected by Puck internally
`config`	Injected by Puck internally
`metadata`	Injected by Puck internally
`dangerouslySetInnerHTML`	Isn’t compatible with Puck slots
`children`	Isn’t compatible with Puck slots

`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.

Drag-and-drop in the outline does not respect this prop. Prefer the disallow field parameter, which is enforced everywhere.

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

`minEmptyHeight`

The minimum height of the slot when empty. Defaults to 128px.

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

`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