rex-setup-wizard v1.0.29

rexWizard

rexWizard is a dynamic, easy-to-integrate wizard setup for any applications. It's designed to work seamlessly across different frameworks like Vanilla JavaScript, Vue, and React.

Features

• Dynamic Step Progression: Navigate through steps with forward and backward capabilities.
• Customizable Styles: Easily modify the look and feel through CSS.
• Logo Integration: Display a custom logo at the top of each step.
• Responsive Design: Adapts to various screen sizes for a seamless user experience.

Installation

Install rexWizard:

npm install rex-setup-wizard

or

yarn add rex-setup-wizard

Uses in JavaScript

const rexWizard = require(rex-setup-wizard');

document.addEventListener('DOMContentLoaded', function() {
    rexWizard({
        general: {
            targetElement: 'wizardContainer',
            title: 'Welcome to the Wizard',
            currentStep: 0,  // Start with the first step
            logo: 'path/to/your/logo.png'
        },
        steps: [
            { title: 'Step 1', html: '<p>Welcome to Step 1</p>', isNextStep: true, isPreviousStep: false,isSkip: false },
            { title: 'Step 2', html: '<p>Welcome to Step 2</p>', isNextStep: true, isPreviousStep: true,isSkip: true },
            { title: 'Step 3', html: '<p>Welcome to Step 3</p>', isNextStep: false, isPreviousStep: true,isSkip: false }
        ]
    });
});

Uses in Vue

import rexWizard from 'rex-setup-wizard'

data() {
    return {
        steps: [
            { title: 'Step 1', html: '<h1>Welcome to Step 1</h1>', isNextStep: true, isPreviousStep: false,isSkip: false},
            { title: 'Step 2', html: '<h1>Welcome to Step 2</h1>', isNextStep: true, isPreviousStep: true,isSkip: true },
            { title: 'Step 3', html: '<h1>Welcome to Step 3</h1>', isNextStep: false, isPreviousStep: true,isSkip: false}
        ],
        currentStep: 0, // Initial step index
        logoUrl: 'path/to/your/logo.png' // URL to the logo image
    };
},

mounted() {
    this.initializeWizard();
},

methods: {
    initializeWizard() {
        rexWizard({
            general: {
                title: 'Welcome to the Wizard',
                currentStep: this.currentStep,
                logo: this.logoUrl // Pass the logo URL to the wizard
            },
            steps: this.steps,
        });
    }
},

watch: {
    // React to changes in currentStep to reinitialize the wizard
    currentStep(newVal, oldVal) {
        if (newVal !== oldVal) {
            this.initializeWizard();
        }
    }
}

Uses in React

import React, { useState, useEffect, useRef } from 'react';
import rexWizard from 'rex-setup-wizard';

function WizardComponent() {
    const [currentStep, setCurrentStep] = useState(0);
    const [steps] = useState([
        { title: 'Step 1', html: '<h1>Welcome to Step 1</h1>', isNextStep: true, isPreviousStep: false,isSkip: false },
        { title: 'Step 2', html: '<h1>Welcome to Step 2</h1>', isNextStep: true, isPreviousStep: true,isSkip: true },
        { title: 'Step 3', html: '<h1>Welcome to Step 3</h1>', isNextStep: false, isPreviousStep: true,isSkip: false }
    ]);
    const logoUrl = 'path/to/your/logo.png'; // URL to the logo image
    const wizardRef = useRef(null);

    // Initialize the wizard
    useEffect(() => {
        if (wizardRef.current) {
            rexWizard({
                general: {
                    targetElement: wizardRef.current.id,
                    title: 'Welcome to the Wizard',
                    currentStep,
                    logo: logoUrl
                },
                steps
            });
        }

        // Adding event listeners or performing additional setup if necessary
        return () => {
            // Clean up any listeners or resets when component unmounts or updates
        };
    }, [currentStep]); // Dependency array includes currentStep to reinitialize on change

    return (
        <div ref={wizardRef} id="reactWizardContainer">
            {/* Wizard will be injected into this container */}
        </div>
    );
}

export default WizardComponent;