@two-devs-and-a-dog/flexible-react-form v1.0.1

Flexible React Form Generator

A React component that generates dynamic forms based on JSON schemas.

Installation

npm install flexible-react-form
# or
yarn add flexible-react-form

Usage

import { SchemaForm } from 'flexible-react-form';

const schema = {
  title: 'Escape Room Location',
  fields: {
    numberOfRooms: {
      type: 'number',
      label: 'Number of Escape Rooms',
      required: true,
      min: 1
    },
    rooms: {
      type: 'array',
      label: 'Escape Rooms',
      itemSchema: {
        difficulty: {
          type: 'range',
          label: 'Difficulty Level',
          min: 1,
          max: 10,
          required: true
        }
      }
    }
  }
};

function App() {
  const handleSubmit = (data) => {
    console.log(data);
  };

  return <SchemaForm schema={schema} onSubmit={handleSubmit} />;
}

Schema Structure

Field Types

• text: Text input
• number: Number input
• range: Number input with min/max
• enum: Dropdown select
• date: Date picker
• array: Repeatable field group

Field Properties

• type: (Required) Field type
• label: (Required) Field label
• required: Boolean
• min: Minimum value for number/range
• max: Maximum value for number/range
• options: Array of options for enum types
• itemSchema: Schema for array field items

Examples

Basic Form

const schema = {
  title: 'Contact Form',
  fields: {
    name: {
      type: 'text',
      label: 'Full Name',
      required: true
    },
    email: {
      type: 'text',
      label: 'Email',
      required: true
    }
  }
};

Form with Enums

const schema = {
  title: 'Store Details',
  fields: {
    pricePoint: {
      type: 'enum',
      label: 'Price Range',
      options: ['$', '$$', '$$$', '$$$$'],
      required: true
    }
  }
};

Nested Array Fields

const schema = {
  title: 'Product Catalog',
  fields: {
    categories: {
      type: 'array',
      label: 'Categories',
      itemSchema: {
        name: {
          type: 'text',
          label: 'Category Name',
          required: true
        },
        priority: {
          type: 'number',
          label: 'Priority Level',
          min: 1,
          max: 5
        }
      }
    }
  }
};

Props

Requirements

• React 16.8+
• Tailwind CSS 3.0+

License

MIT