Docs
API Reference
Configuration
ComponentConfig

ComponentConfig

The configuration for each component defined in Config.

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

Params

ParamExampleTypeStatus
render()render: () => <div />FunctionRequired
fieldsfields: { title: { type: "text"} }Object-
defaultPropsdefaultProps: { title: "Hello, world" }Object-
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

ArgExampleType
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

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

PropExampleType
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

PropExampleType
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
  };
};
ConfigFields