React hook form builder

Light weight schema Form builder for react-hook-form.

This package takes your schema and builds the form based on that using your own components.

Demo

The working react example is here.

Installation

npm i react-hook-form react-hook-form-builder

or with yarn

yarn add react-hook-form react-hook-form-builder

Usage

1. define your form elements:

export const elements = [
  { key: "BasicInput", element: BasicInput },
  { key: "Button", element: Button },
];

2. wrap your root app with <FormBuilderProvider /> and define your elements:

import { FormBuilderProvider } from "react-hook-form-builder";
import { elements } from "../constants/elements.ts";

export default function App() {
  return (
    <div className="App">
      <FormBuilderProvider elements={elements}>
        ...
        {" your app ..."}
      </FormBuilderProvider>
    </div>
  );
}

3. define your schema:

const schema = [
  {
    key: "firstName",
    elementType: "BasicInput",
    defaultValue: "john",
    props: {
      placeholder: "First Name",
    },
  },
  {
    key: "lastName",
    elementType: "BasicInput",
    props: {
      placeholder: "Last Name",
    },
  },
  {
    key: "submit",
    elementType: "Button",
    ignoreController: true,
    props: ({ formState: { isDirty } }: any) => ({
      type: "submit",
      label: isDirty ? "Save" : "Submit",
    }),
  },
];

4. in your desire form, just render your form using <FormBuilder /> and pass your schema & react-hook-form methods:

import { FormBuilder } from "react-hook-form-builder";
import { useForm } from "react-hook-form";
import { schema } from "../constants/contactUsPageSchema.ts";

export default function ContactUsPage() {
  const methods = useForm();
  const onSubmit = (data: any) => console.log(data);

  return (
    <div className="contact-us-page">
      <FormBuilder methods={methods} schema={schema} onSubmit={onSubmit} />
    </div>
  );
}

Documents

schema props

Type	Type	Description
key	string	unique key for each form element.
elementType	string	Define element type
props	any	Props passing to element component.
rules	HTML standard for form validation
defaultValue	any
ignoreController	boolean	ignore wrapping element inside <Controller />.

Example element

import React, { InputHTMLAttributes, ReactElement } from "react";

type IBasicInput = (props: InputHTMLAttributes<HTMLInputElement>) => ReactElement;

const BasicInput: IBasicInput = (props) => {
  return <input {...props} />;
};

export default BasicInput;