Form Builder

A reusable form builder and renderer component for React applications.

Installation

npm install edudemo-formbuilder
# or
yarn add edudemo-formbuilder

Features

• Drag and drop form builder
• Form renderer to display created forms
• Rich set of form components
• Conditional logic support
• Form validation

Usage

FormBuilder Component

import { FormBuilder, FormContextProvider } from 'edudemo-formbuilder';

function MyFormBuilder() {
  const handleFormComplete = (formState) => {
    console.log('Form saved:', formState);
    // Save the form or do something with it
  };

  return (
    <FormContextProvider>
      <FormBuilder 
        label="My Form"
        key="myForm"
        type="form"
        display="form"
        components={[]}
        title="My Custom Form"
        onFormComplete={handleFormComplete}
      />
    </FormContextProvider>
  );
}

export default MyFormBuilder;

FormRenderer Component

import { FormRenderer } from 'edudemo-formbuilder';

function MyFormRenderer({ formData }) {
  const handleFormSubmission = (data) => {
    console.log('Form submitted:', data);
    // Process the form submission data
  };

  return (
    <FormRenderer
      title={formData.title}
      components={formData.components}
      onFormSubmission={handleFormSubmission}
    />
  );
}

export default MyFormRenderer;

Component Properties

FormBuilder

| Property | Type | Description | |----------|------|-------------| | label | string | Form label | | key | string | Unique identifier for the form | | type | string | Type of the form ('form') | | display | string | Display mode ('form') | | components | array | Array of form components | | title | string | Form title | | onFormComplete | function | Callback when form is completed |

FormRenderer

| Property | Type | Description | |----------|------|-------------| | title | string | Form title | | components | array | Array of form components | | onFormSubmission | function | Callback when form is submitted |

License

MIT