JaleelB / emblor

A fully-featured tag input component built with shadcn/ui
https://emblor.jaleelbennett.com
MIT License
526 stars 23 forks source link

React hook form #22

Closed Codemaine closed 2 months ago

Codemaine commented 2 months ago

Please add the ability to use the register object directly with the input, so that we can validate them with React Hook form

Codemaine commented 2 months ago

I've found a temporary solution: <Controller name="tags" control={control} rules={{ required: true }} render={({ field }) => <TagInput placeholder="Enter a topic" tags={tags} id="tags" maxTags={5} minTags={2} value={field.value} setTags={(newTags) => { setTags(newTags); field.onChange(newTags) }} title="Select up to 5 tags" />} />

JaleelB commented 2 months ago

Hey @Codemaine. I'll take a look at this today

JaleelB commented 2 months ago

@Codemaine Thank you for your suggestion and for engaging with the development of the component. After carefully considering the proposal to integrate React Hook Form's control and rules directly into TagInput, I have decided to not integrate the change. There isn't a compelling reason to tightly couple the TagInput with React Hook Form by handling control and rules directly, it's generally better to use Controller. This approach keeps the component flexible and clean, focusing on its primary functionalities while relying on React Hook Form to handle form state and validation externally