<Render>
Render a Data object for a given Config.
import { Render } from "@measured/puck";
export function Example() {
return <Render config={config} data={data} />;
}Props
| Param | Example | Type | Status |
|---|---|---|---|
config | config: { components: {} } | Config | Required |
data | data: {} | Data | Required |
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: {},
}}
// ...
/>
);
}