Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/FionnCasey/react-hook-form-generator
Generate React forms from schema using Chakra UI and React Hook Form
https://github.com/FionnCasey/react-hook-form-generator
Last synced: about 2 months ago
JSON representation
Generate React forms from schema using Chakra UI and React Hook Form
- Host: GitHub
- URL: https://github.com/FionnCasey/react-hook-form-generator
- Owner: FionnCasey
- License: mit
- Created: 2020-03-27T15:37:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-13T15:27:54.000Z (almost 4 years ago)
- Last Synced: 2024-09-15T18:59:52.467Z (3 months ago)
- Language: TypeScript
- Size: 3.02 MB
- Stars: 111
- Watchers: 6
- Forks: 24
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-chakra-ui - React-hook-form-generator
README
# React Hook Form Generator
A [React](https://reactjs.org/) component to quickly and easily generate forms from object schema. Built with [React Hook Form](https://react-hook-form.com/) and [Chakra UI](https://chakra-ui.com/).
## Live Demo
[Storybook](https://fionncasey.github.io/react-hook-form-generator/)
---
## Installation
This package requires chakra-ui and react-hook-form as peer dependencies
```shell
npm install react-hook-form-generator
npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming
npm install react-hook-form
```
---
## Usage
```javascript
// MyForm.js
import React from 'react';
import { Form } from 'react-hook-form-generator';
const schema = {
firstName: {
type: 'text',
label: 'First Name',
isRequired: true,
},
age: {
type: 'number',
label: 'Number',
},
contacts: {
type: 'array',
label: 'Contacts',
itemField: {
type: 'object',
properties: {
firstName: {
type: 'text',
label: 'First Name',
},
phoneNumber: {
type: 'text',
label: 'Phone Number',
htmlInputType: 'tel',
},
},
},
},
};
const MyForm = () => {
const handleSubmit = values => {
// Do something
};
return ;
};
```
This package uses Chakra UI for default styles so you need to wrap the form in a ThemeProvider
```javascript
// App.js
import React from 'react';
import { CSSReset, ThemeProvider } from '@chakra-ui/core';
import MyForm from './MyForm';
const App = () => (
);
```
---
## Styling
Chakra UI [style props](https://chakra-ui.com/style-props) can be passed in as global styles for an a group of components (e.g. all text input fields) or on an individual field basis
```javascript
// Global style method
```
```javascript
// Individual fields method
```
Individual styles will be merged with global styles and take priority
---
## Validation
React Hook Form [schema validation](https://www.react-hook-form.com/advanced-usage#SchemaValidation) and other methods are forwarded through the `formOptions` property on the `Form` component