🎯 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.

Demo Gallery​

Explore all v1 demos:

• Basic Schema API
• Conditional Steps
• Validation with Error Display
• Imperative API
• Complete Feature Showcase

🚀 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​

• Schema API Demo
• All v1 Demos
• Playground
• Props Reference

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

🚀 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​

• Quick Start Guide
• v1 Demos (Schema & all features)
• Playground (try it live)
• Legacy Demos (Children API)

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

Are you looking for an easy way to implement a form wizard in your React application? Look no further! Introducing the React Form Wizard Component - a powerful and customizable form wizard component that simplifies tab wizard management without any external dependencies.

Installation​

To install the React Form Wizard Component, you can use either npm or yarn. Open your terminal and run the following command:

npm install react-form-wizard-component

or

yarn add react-form-wizard-component

Usage​

Using the React Form Wizard Component is straightforward. Here's an example of how you can integrate it into your React application:

import React from 'react';
import FormWizard from 'react-form-wizard-component';
import 'react-form-wizard-component/dist/style.css';

function App() {
  const handleComplete = () => {
    console.log("Form completed!");
    // Handle form completion logic here
  };

  const tabChanged = ({ prevIndex, nextIndex }) => {
    console.log("prevIndex", prevIndex);
    console.log("nextIndex", nextIndex);
  };

  return (
    <FormWizard
      shape="circle"
      color="#e74c3c"
      onComplete={handleComplete}
      onTabChange={tabChanged}
    >
      <FormWizard.TabContent title="Personal details" icon="ti-user">
        {/* Add your form inputs and components for the first step */}
        <h1>First Tab</h1>
        <p>Some content for the first tab</p>
      </FormWizard.TabContent>
      <FormWizard.TabContent title="Additional Info" icon="ti-settings">
        <h1>Second Tab</h1>
        <p>Some content for the second tab</p>
      </FormWizard.TabContent>
      <FormWizard.TabContent title="Last step" icon="ti-check">
        <h1>Last Tab</h1>
        <p>Some content for the last tab</p>
      </FormWizard.TabContent>
    </FormWizard>
  );
}

export default App;

Features​

The React Form Wizard Component offers a range of features to enhance your form wizard experience:

• Title and Subtitle: Customize the title and subtitle of your form wizard to provide context and guidance.
• Tab Shape and Color: Choose between different shapes (e.g., circle, square) and customize the color of the tabs and progress bar.
• Navigation Buttons: Easily configure the text for the "Next," "Back," and "Finish" buttons to match your desired user flow.
• Step Size and Layout: Adjust the size of the steps (e.g., xs, sm, md, lg) and define the layout of your form wizard (e.g., horizontal, vertical).
• Completion and Tab Change Callbacks: Utilize the onComplete and onTabChange callback functions to perform custom logic when the form is completed or the active tab is changed.
• The FormWizard.TabContent component allows you to define the content of each tab, including the title, icon, and content itself.

Refer to the component's source code or documentation for additional props and details.

Examples​

Visit our GitHub repository to explore a range of examples showcasing the usage of the React Form Wizard Component. These examples will help you understand the various ways to configure and customize the component to suit your needs.

Conclusion​

The React Form Wizard Component is a valuable tool for building interactive form wizards in React applications. With its simplicity, flexibility, and extensive features, it allows you to manage complex form flows with ease. Save development time and deliver a smooth user experience by incorporating the React Form Wizard Component into your projects today!

Download the React Form Wizard Component and get started now!

npm install react-form-wizard-component

or

yarn add react-form-wizard-component

For more information, check out the documentation and feel free to contribute to the [GitHub repository](https://github.com/parsajiravand/react-form

-wizard-component) to help make the component even better!

Happy form wizarding!