Skip to main content

2 posts tagged with "Schema API"

View All Tags

· 2 min read
Parsa Jiravand

Schema API Banner

🎯 Introducing Schema API - The Future of React Form Wizards

React Form Wizard v1.0.0 introduces the Schema API - a powerful new way to define form wizards using configuration objects instead of JSX components.

🚀 What is Schema API?​

Schema API lets you define your entire wizard with a configuration object instead of nested JSX. Benefits:

  • 🎯 Declarative - Define logic in plain JavaScript objects
  • 🔄 Dynamic steps - Show/hide steps based on form data
  • 📊 Data-driven - Centralized form state
  • 🔧 Type-safe - Full TypeScript support

📋 Schema API vs Children API​

Traditional Children API (Still Supported)​

<FormWizard title="Registration" onComplete={handleComplete}>
  <FormWizard.TabContent title="Personal Info" icon="ti-user">
    <PersonalInfoForm />
  </FormWizard.TabContent>
  <FormWizard.TabContent title="Payment" icon="ti-credit-card" isValid={paymentValid}>
    <PaymentForm />
  </FormWizard.TabContent>
</FormWizard>

Schema API (New)​

const schema: FormWizardSchema = {
  initialData: { plan: "basic", paymentMethod: "", acceptedTerms: false },
  steps: [
    {
      id: "personal",
      title: "Personal Info",
      icon: "ti-user",
      content: <PersonalInfoForm />,
    },
    {
      id: "payment",
      title: "Payment",
      icon: "ti-credit-card",
      validate: ({ data }) => data.paymentMethod ? true : "Select payment method",
      content: <PaymentForm />,
    },
    {
      id: "premium",
      title: "Premium Features",
      condition: ({ data }) => data.plan === "premium",
      content: <PremiumFeatures />,
    },
  ],
};

<FormWizard schema={schema} data={data} onDataChange={setData} onComplete={handleComplete} />

🎯 Key Features​

  • Conditional steps - Show steps based on condition: ({ data }) => ...
  • Validation - Per-step validation with validate: ({ data }) => true | "error message"
  • Dynamic content - Content can be functions: content: ({ data }) => <div>...</div>

🔗 Try It Live​

Playground​

Experiment in our Playground - embed CodeSandbox examples.

Explore all v1 demos:

🚀 Getting Started​

npm install react-form-wizard-component@latest

React v19+ required!

import { FormWizard, FormWizardSchema, WizardData } from 'react-form-wizard-component';

const schema: FormWizardSchema = {
  initialData: {},
  steps: [
    { id: "step1", title: "Step 1", content: <div>Your content</div> },
  ],
};

<FormWizard schema={schema} data={data} onDataChange={setData} />

📚 Resources​

Ready to try it? Visit the Playground or Schema API demo! 🚀

· 3 min read
Parsa Jiravand

React Form Wizard v1.0.0

🚀 React Form Wizard v1.0.0 - Major Update Released!

We're excited to announce the release of React Form Wizard v1.0.0! This major update brings significant improvements in performance, developer experience, and introduces powerful new features including schema-based form wizards.

⚠️ Important: React Version Requirements​

BREAKING CHANGE: This version requires React v19+. If you're using React v18 or lower, please continue using version 0.2.7:

npm install react-form-wizard-component@0.2.7

Check your React version with:

npm list react

🌟 What's New in v1.0.0​

🔥 Schema-First API (New Feature)​

The biggest addition is the Schema API - a powerful new way to define form wizards using configuration objects instead of JSX components.

Before (Children API - Still Supported)​

<FormWizard title="My Wizard">
  <FormWizard.TabContent title="Step 1" icon="ti-user">
    <MyStep1Component />
  </FormWizard.TabContent>
  <FormWizard.TabContent title="Step 2" icon="ti-settings">
    <MyStep2Component />
  </FormWizard.TabContent>
</FormWizard>

After (Schema API - New!)​

const schema: FormWizardSchema = {
  initialData: { plan: "basic", accepted: false },
  steps: [
    {
      id: "plan",
      title: "Choose Plan",
      content: <PlanSelector />,
    },
    {
      id: "premium",
      title: "Premium Features",
      condition: ({ data }) => data.plan === "premium",
      content: <PremiumFeatures />,
    },
  ],
};

<FormWizard schema={schema} data={data} onDataChange={setData} />

🚀 Performance Improvements​

  • React.memo applied to core components for better re-rendering
  • useMemo and useCallback optimizations for expensive computations
  • Reduced bundle size through better tree-shaking

♿ Accessibility Enhancements​

  • ARIA roles and attributes for better screen reader support
  • Keyboard navigation with arrow keys, Home, and End
  • Focus management improvements
  • Screen reader announcements for step changes

🎨 UI/UX Improvements​

  • Touch-friendly interactions with swipe gestures
  • Responsive design improvements for mobile devices
  • High contrast support for accessibility
  • Reduced motion support for users with vestibular disorders

🛠️ Developer Experience​

  • Enhanced TypeScript support with better type inference
  • New imperative API methods (goToTabById, setData, getData)
  • Improved error handling with better validation feedback
  • Better documentation with comprehensive examples

📊 Testing Infrastructure​

  • Jest + React Testing Library setup
  • Comprehensive test coverage for all components
  • CI/CD pipeline improvements

📈 Migration Guide​

The Children API is still fully supported. Your existing code will continue to work without changes. The onComplete callback now optionally receives wizard data, and onTabChange includes stepId.

🎉 Getting Started​

npm install react-form-wizard-component@latest

⚠️ Remember: React v19+ required!

📚 Resources​

Ready to upgrade? Check out our comprehensive examples and playground! 🚀