https://github.com/bartstc/react-hook-form-chakra-fields
A collection of form fields on top of Chakra UI and React Hook Form, integrated with many other js/ts libraries.
https://github.com/bartstc/react-hook-form-chakra-fields
chakra-ui chakra-ui-icons currencyjs dayjs react react-datepicker react-hook-form react-number-format react-select react-text-mask tsdx typescript
Last synced: 10 months ago
JSON representation
A collection of form fields on top of Chakra UI and React Hook Form, integrated with many other js/ts libraries.
- Host: GitHub
- URL: https://github.com/bartstc/react-hook-form-chakra-fields
- Owner: bartstc
- License: mit
- Created: 2021-03-27T05:27:02.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-20T14:09:51.000Z (almost 5 years ago)
- Last Synced: 2025-04-02T13:48:53.740Z (10 months ago)
- Topics: chakra-ui, chakra-ui-icons, currencyjs, dayjs, react, react-datepicker, react-hook-form, react-number-format, react-select, react-text-mask, tsdx, typescript
- Language: TypeScript
- Homepage: https://github.com/bartstc/react-hook-form-chakra-fields
- Size: 366 KB
- Stars: 13
- Watchers: 1
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Hook Form Chakra Fields
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.
### Included inputs and form fields:
- `Input Field` - standard input field
- `Masked Input Field` - input field with the ability to set any mask you want for example phone or time
- `Money 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 library
- `Date Field` - standard date select field on top of react-datepicker library
- `DateTimeField` - date select field integrated with additional input for providing a specific time
- `DateTimeOnlyField` - 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](https://react-hook-form.com/)
- [Chakra UI](https://chakra-ui.com/)
- [Currency.js](https://currency.js.org/)
- [Day.js](https://day.js.org/)
- [React Datepicker](https://reactdatepicker.com/)
- [React Number Format](https://github.com/s-yadav/react-number-format#readme)
- [React Select](https://react-select.com/)
- [React Text Mask](https://openbase.com/js/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](https://github.com/bartstc/booking-app/tree/master/employee-web-client) to see how to use this library.
## Meta
This library was invented with [TSDX](https://tsdx.io/).