React Dynamic Form Generator

Formgenic is a React component that allows you to dynamically generate forms based on a configuration object. This package makes it easy to create and manage forms in your React applications with minimal setup.

Features

• Dynamic Form Rendering: Generate form fields dynamically based on configuration.
• Validation: Automatically validate form inputs using Yup schema validation.
• Customization: Customize each field with optional class names and inline styles.
• New Feature: Show Placeholders Instead of Labels: You can now choose to show placeholders instead of labels for form fields by configuring the showLabel option in each field configuration object.

Installation

You can install the package using npm or yarn:

npm i formgenic

or

yarn add formgenic

Usage

Basic Example Here's a simple example of how to use the FormGenerator component in a React application:

import React from 'react';
import FormGenerator from 'formgenic';

const App = () => {
  const formConfig = [
    { type: 'text', name: 'username', label: 'Username', required: true },
    { type: 'number', name: 'age', label: 'Age', required: true },
    {
      type: 'select',
      name: 'gender',
      label: 'Gender',
      required: true,
      options: [
        { value: 'male', label: 'Male' },
        { value: 'female', label: 'Female' },
      ],
    },
  ];

  const handleFormSubmit = (data) => {
    console.log('Form Data:', data);
  };

  return (
    <div>
      <h1>Dynamic Form Example</h1>
      <FormGenerator config={formConfig} onSubmit={handleFormSubmit} />
    </div>
  );
};

export default App;

Configuration Object

The config prop of the FormGenerator component accepts an array of field configuration objects. Each object represents a form field with the following properties:

• type: The type of the input field (text, number, select, etc.).
• name: The name attribute of the input field.
• label: The label for the input field.
• className: The className for the input field custom css class name
• style: The style attribute of the input field
• showLabel (optional): Boolean to determine whether to show a label (true by default). Set to false to show a placeholder instead of a label.
• required: A boolean indicating whether the field is required.
• options (for select fields): An array of options, where each option is an object with value and label properties.

Props

• config: An array of configuration objects for form fields. (required)
• onSubmit: A callback function that is called when the form is submitted. The form data is passed as an argument to this function. (required)

Example with More Fields

Here’s an example with a more complex form configuration:

import React from 'react';
import FormGenerator from 'formgenic';

const App = () => {
  const formConfig = [
    { type: 'text', name: 'firstName', label: 'First Name', required: true , showLabel: false },
    { type: 'text', name: 'lastName', label: 'Last Name', required: true },
    { type: 'email', name: 'email', label: 'Email', required: true },
    { type: 'password', name: 'password', label: 'Password', required: true },
    { type: 'number', name: 'age', label: 'Age', required: true },
    { type: 'file', name: 'avatar', label: 'Avatar', required: true },
    {
      type: 'select',
      name: 'country',
      label: 'Country',
      required: true,
      options: [
        { value: 'usa', label: 'USA' },
        { value: 'canada', label: 'Canada' },
        { value: 'uk', label: 'UK' },
      ],
    },
    { type: 'checkbox', name: 'terms', label: 'I accept the terms and conditions', required: true },
  ];

  const handleFormSubmit = (data) => {
    console.log('Form Data:', data);
  };

  return (
    <div>
      <h1>Complex Dynamic Form</h1>
      <FormGenerator config={formConfig} onSubmit={handleFormSubmit} />
    </div>
  );
};

export default App;

Styling the Form

You can style the form inputs by applying custom CSS classes or inline styles directly to the generated form elements. Each field configuration object in the config array can include optional className or style properties:

• className: Pass a string with one or more CSS classes to apply to the input element.
• style: Pass an object with inline CSS styles to apply directly to the input element.
• parent class: there is some parent class to apply to the styling on button inputs and labels (formgenic_btn , formgenic_error_m).

For example:

const formConfig = [
  { type: 'text', name: 'username', label: 'Username', required: true, className: 'custom-input', style: { width: '100%' } },
  // Other fields
];

Customizing the Submit Button

You can customize the appearance of the submit button by passing the following props to the FormGenerator component:

• buttonClassName: A string of class names to apply to the button.
• buttonStyle: An object with inline styles to apply to the button.
• buttonLabel: A custom label for the button.

Example:

<FormGenerator
  config={formConfig}
  onSubmit={handleSubmit}
  buttonClassName="bg-blue-500 text-white px-4 py-2 rounded"
  buttonStyle={{ marginTop: '20px' }}
  buttonLabel="Register"
/>

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License. See the LICENSE file for more details.