<Render>
Render a Data object for a given Config.
import { Render } from "@puckeditor/core";
export function Example() {
return <Render config={config} data={data} />;
}Props
| Param | Example | Type | Status |
|---|---|---|---|
config | config: { components: {} } | Config | Required |
data | data: {} | Data | Required |
fieldTransforms | fieldTransforms: {text: () => <div />} | FieldTransforms | - |
metadata | metadata: {} | Metadata | - |
Required props
config
An object describing the available components, fields and more. See the Config docs for a full reference.
export function Example() {
return (
<Render
config={{
components: {
HeadingBlock: {
fields: {
children: {
type: "text",
},
},
render: ({ children }) => {
return <h1>{children}</h1>;
},
},
},
}}
// ...
/>
);
}data
The data to render against the provided config. See the Data docs for a full reference.
export function Example() {
return (
<Render
data={{
content: [
{
props: { children: "Hello, world", id: "id" },
type: "HeadingBlock",
},
],
root: {},
}}
// ...
/>
);
}fieldTransforms
Specify transforms to modify field values before being passed to your components. Implements the Field Transforms API.
Transforms may return components, unlike resolveData, which must return JSON and writes back to your Data payload.
export function Example() {
return (
<Render
fieldTransforms={{
text: ({ value }) => <span>{value}</span>, // Wrap all text field values in a span
}}
// ...
/>
);
}metadata
An object containing additional data provided to each component’s render and resolveData functions.
export function Example() {
return (
<Render
metadata={{ title: "Hello, world" }}
config={{
HeadingBlock: {
render: ({ puck }) => {
return <h1>{puck.metadata.title}</h1>; // "Hello, world"
},
},
}}
// ...
/>
);
}