`mapSlots(item, map)`

Recursively map all slots within an item, using a depth-first approach where the deepest slots are processed first.

// Add the example prop to all children of `item`
mapSlots(item, config, (content) =>
  content.map((child) => ({
    ...child,
    props: { ...child.props, example: "Hello, world" },
  }))
);

Args

Param	Example	Type
`item`	`{ type: "Heading", props: {} }`	ComponentData
`config`	`{ components: {} }`	Config
`map()`	`(content) => content.slice(0, 1)`	Function

`item`

The ComponentData to traverse.

`config`

A Puck config object, used to determine which components contain slots.

`map(content, options)`

A mapping function called for each slot. Receives an array of ComponentData.

Args

Param	Example	Type
`content`	`[{ type: "Heading", props: {} }]`	`ComponentData[]`
`options`	`{ parentId: "Flex-123", propName: "Content" }`	object

`content`

An array of ComponentData, containing all the nodes for this slot.

`options`

An object containing additional options

`options.parentId`

The id of the parent component that defines this slot.

`options.propName`

The name of the slot field.

Returns

An updated array of ComponentData.

Functions migrate