Integrating PuckDynamic Fields

Dynamic Fields

Dynamic field resolution allows you to change the field configuration for a component based on the current component props.

Dynamic component fields

The resolveFields function allows you to make synchronous and asynchronous changes to the field configuration.

For example, we can set the configuration of one field based on the prop value of another:

const config = { components: { MyComponent: { resolveFields: (data) => { const fields = { drink: { type: "radio", options: [ { label: "Water", value: "water" }, { label: "Orange juice", value: "orange-juice" }, ], }, }; if (data.props.drink === "water") { return { ...fields, waterType: { // ... Define field }, }; } return fields; }, // ... }, }, };
Interactive Demo
Try changing the "drink" field

water (still)

Making asynchronous calls

The resolveFields function also enables asynchronous calls.

Here’s an example populating the options for a select field based on a radio field

const config = { components: { MyComponent: { resolveFields: async (data, { changed, lastFields }) => { // Don't call the API unless `category` has changed if (!changed.category) return lastFields; // Make an asynchronous API call to get the options const options = await getOptions(data.category); return { category: { type: "radio", options: [ { label: "Fruit", value: "fruit" }, { label: "Vegetables", value: "vegetables" }, ], }, item: { type: "select", options, }, }; }, render: ({ item }) => <h1>{item}</h1>, }, }, };
Interactive Demo
Try changing the "category" field

Limitations

The slot field is not currently support with Dynamic Fields, but most use-cases can be achieved using Dynamic Props.

Further reading