This is our final feature release of the year! We’re delaying the new drag-and-drop engine release until January while we iron out the last few kinks. Happy holidays, and thanks for being a wonderful community 🎄
resolveFields
API, enabling you to customize the fields based on the container’s type or props.We’ve made React 19 support official by adding it to the supported list of peer dependencies. It turns out that earlier versions of Puck already play well with React 19, you don’t need to upgrade Puck to use React 19 if you don’t want to.
The official next recipe now uses Next 15.1 and React 19 by default. If you’re using the recipe and want to upgrade, make sure you also upgrade to React 19 as required by Next 15 when using the App Router. See the official Next.js upgrade guide for more info.
The mapRow
API now supports react elements, making it possible to add richer content to your external field table:
{
type: "external",
fetchList: async () => {
return [
{ title: "Hello, world", imgUrl: "https://example.com/img.jpg" },
{ title: "Goodbye, world", imgUrl: "https://example.com/img.jpg" },
];
},
mapRow: (item) => ({ ...item, imgUrl: <img src={item.imgUrl} /> }),
}
And the new renderFooter
API enables you to customise the footer of your external field modal.
{
type: "external",
fetchList: async () => {
return [
{ title: "Hello, world" },
{ title: "Goodbye, world" },
];
},
renderFooter: ({ items }) => (
<b>Custom footer with {items.length} results</b>
),
}
A new action in the array field allows you to easily duplicate array items.
The new parent
param on the resolveFields
API enables you to configure your fields based on the props of the parent item when using DropZones.
Here’s an example that shows a field called flex
when the parent component has a display
prop of "flex"
:
const config = {
components: {
MyComponent: {
resolveFields: (data, { fields, parent }) => {
if (parent.props.display === "flex") {
return {
...fields,
flex: {
type: "radio",
options: [
{ label: "Grow", value: "grow" },
{ label: "Shrink", value: "shrink" },
],
},
};
}
return fields;
},
// ...
},
},
};
See GitHub for more.
If you’re interested in learning more about Puck, check out the demo or read the docs. If you like what you see, please give us a star on GitHub to help others find Puck too!