transformProps

Transform component props stored in a Data payload. This convenience method can be used for prop renames and other data migrations.

This method will modify all data in content and zones.

import { transformProps } from "@measured/puck";
 
const data = {
  content: [{ type: "HeadingBlock", props: { title: "Hello, world" } }],
};
 
const updatedData = transformProps(data, {
  // Rename `title` to `heading`
  HeadingBlock: ({ title, ...props }) => ({ heading: title, ...props }),
});
 
console.log(updatedData);
// { content: [{ type: "HeadingBlock", props: { heading: "Hello, world" } }] };

Args

data

The Data payload to be transformed.

transforms

An object describing the transform functions for each component defined in your config.

• root is a reserved property, and can be used to update the root component props.

config

A config object. Normally only required if using slots.

Returns

The updated Data object.

Notes

• It’s important to consider that data may include both components with old data and new data, and write your transform accordingly.