react-form-builder-helper v1.2.13

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

fieldWrapper

fieldComponents