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

// App.js
import React from 'react';
import { CSSReset, ThemeProvider } from '@chakra-ui/core';
import MyForm from './MyForm';
const App = () => (
  <ThemeProvider>
    <CSSReset />
    <MyForm />
  </ThemeProvider>
);

// 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',
        },
      },
    },
  }}
/>