React Form Components

Reusable React form components with auto-save and state recovery. Built with TypeScript for type safety and designed to be headless for maximum customization flexibility.

Features

• Paginated forms with smooth transitions between questions
• Auto-save functionality (default: every 10 seconds)
• State recovery - resume where you left off
• TypeScript support with full type definitions
• Headless design - fully customizable styling
• Validation - built-in and custom validators
• Accessibility - ARIA labels and keyboard navigation
• Multiple question types:
  • Single choice (radio buttons)
  • Multiple choice (checkboxes)
  • Text input with "specify" options

Installation

npm install @octopuslabs/react-form-components

Quick Start

import { FormBuilder } from '@octopuslabs/react-form-components';

const myForm = {
  id: 'my-form',
  title: 'My Questionnaire',
  questions: [
    {
      id: 'q1',
      text: 'What is your name?',
      type: 'text',
      required: true
    }
  ]
};

const api = {
  saveProgress: async (formId, progress) => {
    await fetch('/api/save', { method: 'POST', body: JSON.stringify(progress) });
  },
  loadProgress: async (formId) => {
    const res = await fetch('/api/load');
    return res.json();
  },
  submitForm: async (formId, progress) => {
    await fetch('/api/submit', { method: 'POST', body: JSON.stringify(progress) });
  }
};

function App() {
  return (
    <FormBuilder
      schema={myForm}
      api={api}
      eventHandlers={{
        onSubmit: (progress) => console.log('Submitted!', progress)
      }}
    />
  );
}

Documentation

See INTEGRATION.md for complete documentation including:

• Detailed API reference
• Backend integration examples
• Customization guide
• TypeScript types
• Advanced examples

Development

Install dependencies

npm install

Run demo app

npm run dev

The demo app will run on http://localhost:5173 and includes a complete example form with mock backend.

Build library

npm run build

This creates distributable files in the dist/ directory.

Type checking

npm run type-check

Project Structure

form-components/
├── src/                      # Library source code
│   ├── components/           # React components
│   │   ├── FormBuilder.tsx   # Main form component
│   │   ├── questions/        # Question type components
│   │   └── navigation/       # Navigation & progress
│   ├── hooks/                # React hooks
│   │   ├── useFormState.ts   # Form state management
│   │   ├── useAutoSave.ts    # Auto-save logic
│   │   └── useFormValidation.ts
│   ├── types/                # TypeScript definitions
│   └── index.ts              # Main exports
├── demo/                     # Demo application
│   ├── App.tsx               # Demo app
│   ├── mockData.ts           # Example form schema
│   ├── mockBackend.ts        # Mock API
│   └── styles.css            # Demo styles
├── INTEGRATION.md            # Integration guide
└── package.json

License

MIT

Compatibility

• React 18+ or React 19+
• TypeScript 4.9+
• Modern browsers (ES2020+)