@smart-wizard/react

Official React adapter for SmartWizard.
React hooks (useSmartWizard) and Context API (SmartWizardProvider).

This package is part of the SmartWizard project, the next-generation continuation of the popular jQuery SmartWizard.

📖 Documentation & Links

• 📚 Full React Documentation & Examples: GitHub Readme
• 🌐 Official Website & Demos: techlaboratory.net/smart-wizard
• 🐙 Repository: github.com/techlab/smart-wizard
• 🐛 Issue Tracker: github.com/techlab/smart-wizard/issues

📥 Installation

npm install @smart-wizard/react @smart-wizard/core @smart-wizard/ui

⚡ Quick Example

import { useRef } from 'react';
import { useSmartWizard } from '@smart-wizard/react';
import '@smart-wizard/ui/full';
import '@smart-wizard/ui/themes/arrows.css';

export function Wizard() {
  const wizardRef = useRef<HTMLDivElement>(null);
  const { next, prev, stepInfo } = useSmartWizard(wizardRef, {
    theme: 'arrows',
    transition: { effect: 'slideHorizontal' },
  });

  return (
    <div ref={wizardRef} id="wizard">
      <nav className="sw-nav" role="tablist">
        <div className="sw-nav-item" role="tab"><span className="title">Step 1</span></div>
        <div className="sw-nav-item" role="tab"><span className="title">Step 2</span></div>
      </nav>
      <div className="sw-panels">
        <section className="sw-panel" id="step-1" role="tabpanel">Step 1 Content</section>
        <section className="sw-panel" id="step-2" role="tabpanel">Step 2 Content</section>
      </div>
      <div className="sw-toolbar">
        <button onClick={prev}>Back</button>
        <button onClick={next}>Next</button>
      </div>
    </div>
  );
}

📝 License

Smart Wizard is dual-licensed:

GNU General Public License v3.0 (GPLv3) - free and open-source under the GNU General Public License v3.0

Commercial License — Required for proprietary (closed-source) application, commercial SaaS, or client project without releasing your application's source code under the GPLv3.

Commercial licenses help support continued development, maintenance, and new features.