react-hook-form-chakra

Why?

Because setting up low level bindings is boring and tedious, and keeps you away from actually building solutions. This library takes care of most of the grunt work and doesn't try to abstract away the underlying frameworks but rather embraces their composable architecture by leveraging inversion of control and composable components.

🔥 Demo

Demo on CodeSandbox includes a demo with form provider (simpler but less performant, see section below) as well as usage without FormProvider (requires extra parameter control)

⚙️ Installation

Requires react, react-hook-form, and @chakra-ui/react as peer dependencies

npm install react-hook-form-chakra

or

yarn add react-hook-form-chakra

📝 Form Provider

React hook form can be configured to use FormProvider which uses context to implicitly pass form data down to all children components. This approach simplifies development but it does have some performance implications to be mindful of.

When using FormProvider control is not required on components, otherwise it is. Check out our demo for usage examples.

📖 API Reference

Documentation for all component props can be found here.

📄 License

react-hook-form-chakra is an open-sourced software licensed under the MIT license.

🤝 Contributing

Check out our Contributing guide.

🙇 Credit

This library was adapted from another similar chakra binding library made for Formik

Changelog

[1.0.2] - 2023-12-19

Fixed

• error when there is no initial value defined

Added

• Add ability to define tooltip text on all controls
• Add ability to set default values via prop (in support of dynamic components) #2