react-hook-form-generator - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #golang #rust #deep-learning #docker #macos #java #kubernetes #vue #security #open-source

react-hook-form-generator

(★ 116)

Generate React forms from schema using Chakra UI and React Hook Form

File Explorer

Download Latest Version (.zip)

- - main.yml
- config.js
- main.js
- Form.test.tsx
- - storybook_ui-manifest.json
  - storybook_ui_dll.js
  - storybook_ui_dll.LICENCE
- favicon.ico
- iframe.html
- index.html
- main.86b4d1cdadd0657db0fb.bundle.js
- main.86b4d1cdadd0657db0fb.bundle.js.map
- main.b00e96d1574e3d9c1053.bundle.js
- runtime~main.86b4d1cdadd0657db0fb.bundle.js
- runtime~main.86b4d1cdadd0657db0fb.bundle.js.map
- runtime~main.ab7db0239d02e2e25577.bundle.js
- vendors~main.7121b1092e5054e3a9ef.bundle.js
- vendors~main.86b4d1cdadd0657db0fb.bundle.js
- vendors~main.86b4d1cdadd0657db0fb.bundle.js.LICENSE.txt
- vendors~main.86b4d1cdadd0657db0fb.bundle.js.map
- - CheckboxField.tsx
  - Containers.tsx
  - Form.tsx
  - NumberField.tsx
  - SelectField.tsx
  - SwitchField.tsx
  - TextAreaField.tsx
  - TextField.tsx
- - useErrorMessage.ts
  - useStyles.ts
- index.tsx
- types.ts
- CustomFields.stories.tsx
- Form.stories.tsx
.gitignore
LICENSE
package-lock.json
package.json
README.md
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/FionnCasey/react-hook-form-generator

Downloads the entire project code from GitHub to your computer.

cd react-hook-form-generator

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install react-hook-form-generator

Downloads and installs the libraries listed in package.json.

npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

Downloads and installs the libraries listed in package.json.

npm install react-hook-form

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 <Form title="My Form" schema={schema} handleSubmit={handleSubmit} />;
};
```

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 = () => (
  <ThemeProvider>
    <CSSReset />
    <MyForm />
  </ThemeProvider>
);
```

---

## 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
<Form
  styles={{
    textField: {
      control: {
        margin: 4,
      },
      input: {
        focusBorderColor: 'teal.500',
      },
    },
  }}
/>
```

```javascript
// Individual fields method
<Form
  schema={{
    firstName: {
      type: 'text',
      style: {
        control: {
          margin: 4,
        },
        input: {
          focusBorderColor: 'teal.500',
        },
      },
    },
  }}
/>
```

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