@jielu/react-hook-form-chakra-fields
v0.1.7
Published
A collection of form fields on top of simple and accessible react component library [Chakra UI](https://chakra-ui.com/) and performant form library [React Hook Form](https://react-hook-form.com/), integrated with many other js/ts libraries.
Downloads
20
Maintainers
Readme
React Hook Form Chakra Fields
A collection of form fields on top of simple and accessible react component library Chakra UI and performant form library React Hook Form, integrated with many other js/ts libraries.
Included inputs and form fields:
Input Field
- standard input fieldMasked Input Field
- input field with the ability to set any mask you want for example phone or timeMoney Field
- input field intended for monetary values (you can easily extend it with for example currency select)Select Field
- advanced select field on top of powerful react-select libraryDate Field
- standard date select field on top of react-datepicker libraryDateTimeField
- date select field integrated with additional input for providing a specific timeDateTimeOnlyField
- time field for time value only
All components are accessible (thanks Chakra UI!) and have support for chakra UI dark mode.
Installation
You need to install all below-mentioned libraries as a peer dependencies of this package.
- React Hook Form
- Chakra UI
- Currency.js
- Day.js
- React Datepicker
- React Number Format
- React Select
- React Text Mask
yarn add react-hook-form chakra-ui/react chakra-ui/icons @emotion/react @emotion/styled framer-motion currency.js dayjs react-datepicker react-number-format react-select react-text-mask
yarn add -D @types/react-datepicker @types/react-text-mask @types/react-select
yarn add react-hook-form-chakra-fields
Usage Examples - TODO
You can always check this project repository to see how to use this library.
Meta
This library was invented with TSDX.