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
- define your form elements:
export const elements = [
{ key: "BasicInput", element: BasicInput },
{ key: "Button", element: Button },
];
- 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>
);
}
- 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",
}),
},
];
- 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;