React Form Builder Helper

Overview

React Form Builder Helper is a lightweight package that helps you create dynamic form fields from JSON objects. It uses React Hook Form React hook form under the hood to provide real-time validation and a simple API for creating and managing form fields.

• Note: Bootstrap is recomended

Features

• Dynamic form fields: Create form fields dynamically from JSON objects
• Real-time validation: Validate form fields in real-time using React Hook Form's built-in validation features
• Easy to use: Simple and intuitive API for creating and managing form fields

Getting Started

Installation

To get started, install the package using npm:

npm i --save react-form-builder-helper

Peer Dependencies

This package requires React hook form as a peer dependency. Make sure to install it separately:

npm i --save react-hook-form

Documentation

You can see a usage documentation and interact with every kind of field form:

react-form-builder-helper

Usage

You have to import FieldPrinter component and use an array of field configurations to map them. Each field configuration is an object that defines the properties of the field, such as its tag, type, label, and validation rules.

Here's an example:

import { useForm } from 'react-hook-form'
import Field from 'react-form-builder-helper';

const fields = [
  {
    name: 'username',
    tag: 'input',
    label: 'Username',
    type: 'text',
    validations: {
      required: true,
      minLength: 3,
    }
  },
  {
    name: 'email',
    tag: 'input',
    label: 'Email',
    type: 'email',
    validations: {
      required: true,
    }
  }
];

const MyForm = () => {
  const form = useForm();

  const { register, control, handleSubmit, formState: { errors } } = form;
    
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <Field
          key={index}
          field={field}
          form={form}
          error={errors[field.name]}
        />
      ))}
      <button type="submit">Submit</button>
    </form>
  );
};

Usage with DynamicFormBuilder

The DynamicFormBuilder component is an easy way to generate the entire form only passing some props. It takes a JSON object with the form fields and renders a dynamic form.

Here's an example of how to use:

import { DynamicFormBuilder } from 'react-form-builder-helper';

const formFields = [
    {
        label: "Name",
        name: "text",
        tag: "input",
        type: "text",
        placeholder: "Write name",
        validations: {
            required: true
        }
    },
    {
        label: "Type",
        name: "select",
        tag: "select",
        type: "simple",
        options: ["opcion1", "opcion2", "opcion3"],
        validations: {
            required: true
        }
    },
];

const MyForm = () => {
  const onSubmit = (data) => {
    console.log(data);
  };

  return (<div>
    <DynamicFormBuilder
      id="my-form"
      fields={formFields}
      onSubmit={onSubmit}
      onInvalidSubmit={(errors) => console.log(errors)}
    />
    
    <button form="id-form">Submit all</button>
  </div>);
};

DynamicFormBuilder Props

Prop	Type	Description
id	string	Form ID to use it in submit button	Required
fields	array	Form fields array	Required
defaultValues	object	Form default values
onSubmit	function	Submit function	Required
onInvalidSubmit	function	Callback when form fields has errors
fieldWrapper	object	Component to wrap every one form field
fieldComponents	object	Custom form field component type
saveTemporalData	function	Callback for storage data before component unmounth
useFormProps	object	Extra props to useForm hook
className	string	Classes for main form container. Default: "row row-gap-3"

fieldWrapper

Prop	Type	Description
component	ComponentType	Wrapper component
props	{ className?: string } & I_JsonObject	Props for wrapper component

fieldComponents

Prop	Type	Description
label	ComponentType	Specific component for labels of form fields
component	ComponentType	Specific component for any form field