ronnycoding / react-hook-form-generator

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

React Hook Form Generator

A React component to quickly and easily generate forms from object schema. Built with React Hook Form and Chakra UI.

Live Demo

Storybook

---

Installation

This package requires chakra-ui and react-hook-form as peer dependencies

npm install react-hook-form-generator
npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming
npm install react-hook-form

---

Usage

// 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

// 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 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

// Global style method
<Form
  styles={{
    textField: {
      control: {
        margin: 4,
      },
      input: {
        focusBorderColor: 'teal.500',
      },
    },
  }}
/>

// 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 and other methods are forwarded through the formOptions property on the Form component