Life is hard but coding can be easier. The reason we ❤️ open-source software (OSS) is because there're many awesome libraries that help us making a better world by software products. React Cool Form bears the faith in mind, it allows us integrate with any 3rd-party UI libraries easily. There're three ways to integrate with an UI library in React Cool Form.
Uncontrolled components or components that rely on native input elements (i.e. input, select, and textarea) to work under the hood, we need to do nothing 😂. For example: Material-UI's TextField, Checkbox, and Select, etc.
Controlled components with highly customized and full features like React Select or React Datepicker. We can use React Cool Form's useControlled hook to create a reusable controller component for them in a flexible and performant way.
When using the hook (and not working with field-array), a default value is required.
If the above solutions can't meet your needs then you can set up a custom field with the API of React Cool Form. The following example demonstrates how to combine the useFormState and useFormMethods to DIY a custom field with full validation UX.