ComponentConfig

The configuration for each component defined in Config.

const config = {
  components: {
    HeadingBlock: {
      fields: {
        title: {
          type: "text",
        },
      },
      render: ({ title }) => <h1>{title}</h1>,
    },
  },
};

Params

Param	Example	Type	Status
`render()`	`render: () => <div />`	Function	Required
`fields`	`fields: { title: { type: "text"} }`	Object	-
`defaultProps`	`defaultProps: { title: "Hello, world" }`	Object	-
`label`	`label: "Heading Block"`	String	-
`resolveData()`	`resolveData: async ({ props }) => ({ props })`	Object	-

Required params

`render(props)`

A render function to render your component. Receives props as defined in fields, and some internal Puck props.

const config = {
  components: {
    HeadingBlock: {
      render: () => <h1>Hello, world</h1>,
    },
  },
};

Args

Arg	Example	Type
`props`	`{ id: "id", puck: { renderDropZone: DropZone } }`	Object

`props.id`

A unique ID generated by Puck for this component. You can optionally apply this, or use your own ID.

`props.puck.renderDropZone`

A render method that creates a <DropZone> for creating nested components. Use this method instead of the <DropZone> when implementing React server components.

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

`...props`

The remaining props are provided by the user-defined fields.

Returns

Returns a ReactNode

Optional params

`fields`

An object describing which Field to show for each prop passed to the component.

const config = {
  components: {
    HeadingBlock: {
      fields: {
        title: {
          type: "text",
        },
      },
      render: ({ title }) => <h1>{title}</h1>,
    },
  },
};

Interactive Demo

Example

Hello, world

`defaultProps`

Default props to apply to a new instance of the component.

const config = {
  components: {
    HeadingBlock: {
      fields: {
        title: {
          type: "text",
        },
      },
      defaultProps: { title: "Hello, world" },
      render: ({ title }) => <h1>{title}</h1>,
    },
  },
};

Interactive Demo

Example

Hello, world

`label`

A label to show when referring to your component within the Puck editor. Defaults to the key of your component.

const config = {
  components: {
    HeadingBlock: {
      label: "Heading Block",
      render: () => <h1>Hello, World</h1>,
    },
  },
};

Interactive Demo

Heading Block

`resolveData(data, params)`

Dynamically change the props and set fields as read-only. Can be used to make asynchronous calls.

This function is triggered when <Puck> renders, when a field is changed, or when the resolveAllData function is called.

Example mapping 'title' to 'resolvedTitle'

const config = {
  components: {
    HeadingBlock: {
      fields: {
        title: {
          type: "text",
        },
      },
      resolveData: async ({ props }) => {
        return {
          props: { resolvedTitle: props.title },
          readOnly: { resolvedTitle: true },
        };
      },
      render: ({ resolvedTitle }) => <h1>{resolvedTitle}</h1>,
    },
  },
};

Interactive Demo

Try changing the "title" field

Args

Prop	Example	Type
`data`	`{ props: { title: "Hello, world" }, readOnly: {} }`	Object
`params`	`{ changed: { title: true } }`	Object

`data.props`

The current props for the component.

const resolveData = async ({ props }) => {
  return {
    props: { resolvedTitle: props.title },
  };
};

`data.readOnly`

The fields currently set to read-only for this component.

`params.changed`

An object describing which fields have changed on this component since the last time resolveData was called.

Example only updating 'resolvedTitle' when 'title' changes

const resolveData = async ({ props }, { changed }) => {
  if (!changed.title) {
    return { props };
  }
 
  return {
    props: { resolvedTitle: props.title },
  };
};

Returns

Prop	Example	Type
`data`	`{ props: { title: "Hello, world" }, readOnly: {} }`	Object

`data.props`

A partial props object containing modified props. Will be spread into the other props.

Example only updating resolvedTitle when title changes

const resolveData = async ({ props }) => {
  return {
    props: { resolvedTitle: props.title },
  };
};

`data.readOnly`

A partial object describing fields to set as readonly. Will be spread into the existing readOnly state.

Example only updating resolvedTitle when title changes

const resolveData = async ({ props }) => {
  return {
    props: { resolvedTitle: props.title },
    readOnly: { resolvedTitle: true }, // Make the `resolvedTitle` field read-only
  };
};

Config Fields