Forms example

[Aman-Anas]

Hi, this is a great library and I'm enjoying the flexibility of the project. Documentation is also great.

I was able to create a form builder tool using Puck, shadcn, and the react-hook-forms library. Basically I just have a react-hook-form <FormProvider> wrapping all the actual form element children, which I can then just make Puck components for and it works almost perfectly.

There are some quirks with "default values" and setting them up as props.

I ended up adding a useEffect trigger like this into the render function, so it would update the form's value with the initial state prop while the component is in the "editor" mode, and once the user has entered some real data in a <Render>, I can use react-hook-form's submit functionality to "save" the state and pass it back in via the metadata field.

useEffect(() => {
    // initialValue is a puck prop
    if (!(id in puck.metadata)) {
        resetField(id, { defaultValue: initialValue });
    }
}, [initialValue])

It seems to work, so I just wanted to share this use case. I'm also not sure if this is the best way to do things, so maybe an example could be added in the docs.

[FedericoBonel]

Hey @Aman-Anas!

Thanks for sharing 👐

I think that could work! Another option is that, since in the editor you wouldn’t necessarily need to submit the form, you could use your Puck prop as the field’s value or defaultValue when the isEditing prop is true. If it’s not, just set it to undefined and let React Hook Form handle it as usual.

Does that make sense?

[Aman-Anas]

I tried doing it that way initially, but that seems to cause the form to submit "undefined" for all the default values it passes in (until you edit the text, then it updates). Using the resetField() method seems to register the default value properly.

[FedericoBonel]

Ah yeah! Maybe you could provide a default value for the input type (for example, an empty string for inputs of type "text"), just to avoid using an effect, but nothing wrong with using it if you prefer it.