Narrating Prophetic Monks

    react-hook-form-builder
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.3 • Public • Published

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

    Install

    npm i react-hook-form-builder

    DownloadsWeekly Downloads

    3

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    24.7 kB

    Total Files

    31

    Last publish

    Collaborators

    • sepehr09