@nexus-state/form-builder-react

React UI components for Nexus State Form Builder

🎯 Overview

React UI components for the Nexus State Form Builder. Provides drag-and-drop interface, canvas, palette, and properties panel for visual form building.

Features:

• 🎨 Drag-and-Drop interface
• 📦 Component Registry with built-in React components
• ⚙️ Properties Panel for configuration
• 👁️ Live Preview with validation
• 🎯 TypeScript support
• ♿ Accessibility-friendly

📦 Installation

npm install @nexus-state/form-builder-react @nexus-state/core @nexus-state/form

Peer dependencies:

• react — for UI components (optional)
• react-dom — for React DOM rendering

🚀 Quick Start

Basic Usage

import { builderAtom, builderActions, defaultRegistry, builtInComponents } from '@nexus-state/form-builder-react';
import { useAtom } from '@nexus-state/react';

// Register built-in components
defaultRegistry.registerMany(builtInComponents);

// Use in component
function FormBuilderApp() {
  const [state] = useAtom(builderAtom);

  // Add a field
  const addField = () => {
    builderActions.addField({
      id: `field_${Date.now()}`,
      type: 'text',
      name: 'username',
      label: 'Username',
      required: false,
    });
  };

  return (
    <div>
      <button onClick={addField}>Add Field</button>
      <p>Current fields: {state.schema.fields.length}</p>
    </div>
  );
}

📖 API Reference

Core Exports (from form-builder-core)

All exports from @nexus-state/form-builder-core are available:

• builderAtom, builderActions, builderSelectors
• defaultRegistry, ComponentRegistry
• generateCode, validateFieldSchema, etc.

React-Specific Exports

import { builtInComponents } from '@nexus-state/form-builder-react';

// Built-in React components
const components = builtInComponents;

📊 Architecture

@nexus-state/form-builder-core/      # Framework-agnostic core
├── schema/                          # Types and validation
├── registry/                        # Component registry
├── state/                           # Builder state
├── export/                          # Code generator
└── utils/                           # Utility functions

@nexus-state/form-builder-react/     # React adapter
├── registry/built-in-components.tsx # React components
└── index.ts                         # React exports

📚 Resources

• Nexus State Documentation
• GitHub Repository
• Examples

🔗 See Also

• Core: @nexus-state/core — Foundation (atoms, stores)
• Forms:
  • @nexus-state/form — Form management
  • @nexus-state/form-schema-zod — Zod validation
  • @nexus-state/form-schema-yup — Yup validation
• Framework integration:
  • @nexus-state/react — React hooks

Full ecosystem: Nexus State Packages

📄 License

MIT © Nexus State Contributors