README for @helmi_ba/form-builder

Visual Form Builder for React with TypeScript

Installation

npm install @helmi_ba/form-builder

Peer Dependencies

@helmi_ba/form-builder depends on @helmi_ba/form-core for form schema types and validation logic. You must install @helmi_ba/form-core alongside this package:

npm install @helmi_ba/form-core

⚠️ Important: This package requires @helmi_ba/form-core for schema types and validation. If it's not installed, you may encounter build-time or runtime errors.

Overview

@helmi_ba/form-builder provides a <FormBuilder /> React component to build forms visually.

<FormBuilder> Props

| Prop | Type | Default | Description | |-------------------------------|-----------------------------------|---------|------------------------------------------------------------------| | enableLocalStorageAutoSave | boolean | false | Save schema to localStorage on change | | height | number | 0 | Canvas height (0 = auto) | | width | number | 0 | Canvas width (0 = auto) | | headerColor | string | '#fff'| Color of builder header | | primaryColor | string | '#007bff'| Primary action color | | secondaryColor | string | '#6c757d'| Secondary action color | | canvasColor | string | '#f8f9fa'| Background color for canvas | | initialLeftPanelWidth | number | 260 | Width of left side panel | | initialRightPanelWidth | number | 250 | Width of right side panel | | resizablePanels | boolean | true | Allow resizing panels | | onCallBack | (form?: FormSchema) => void | undefined| Handler called when schema changes |

Usage Example

import { FormBuilder } from '@helmi_ba/form-builder';
import { FormSchema } from '@helmi_ba/form-core';

const App = () => (
  <FormBuilder
    enableLocalStorageAutoSave={true}
    height={600}
    width={800}
    headerColor="#222"
    primaryColor="#0d6efd"
    secondaryColor="#6c757d"
    canvasColor="#f0f0f0"
    initialLeftPanelWidth={300}
    initialRightPanelWidth={300}
    resizablePanels={true}
    onCallBack={(form?: FormSchema) => console.log('Schema:', form)}
  />
);

For more details, visit the GitHub repository.