Menu Close

Light weight schema Form builder for react-hook-form

Light weight schema Form builder for react-hook-form

React hook form builder

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

NPM

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 },
];
  1. 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> ); }
  1. 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", }), }, ];
  1. 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 Object / (args: UseFormReturn) => Object Props passing to element component.
rules HTML standard for form validation
defaultValue any
ignoreController boolean ignore wrapping element inside <Controller />.
onDidMount (args: UseFormReturn) => void function that will be called after the field is mounted.
onDidUnMount (args: UseFormReturn) => void function that will be called after the field is unmounted.

Example element

import React, { InputHTMLAttributes, ReactElement } from "react"; type IBasicInput = (props: InputHTMLAttributes<HTMLInputElement>) => ReactElement; const BasicInput: IBasicInput = (props) => { return <input {...props} />; }; export default BasicInput;
View Source Code
Posted in React