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.
The working react example is here.
npm i react-hook-form react-hook-form-builderor with yarn
yarn add react-hook-form react-hook-form-builder- 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>
);
}| 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. |
import React, { InputHTMLAttributes, ReactElement } from "react";
type IBasicInput = (props: InputHTMLAttributes<HTMLInputElement>) => ReactElement;
const BasicInput: IBasicInput = (props) => {
return <input {...props} />;
};
export default BasicInput;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent