Rex Setup Wizard Manager

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

Description

Rex Setup Wizard Manager is a dynamic, customizable, easy-to-integrate wizard setup for any application. That can be used from the JS application for wizard facilities and can also be used for different functionality that can be sent through a template.

Features

• Dynamic Step Progression
• Skip step
• Current step
• Customisable Styles
• Logo Integration

Installation

Install Rex Setup Wizard Manager:

npm install rex-setup-wizard-manager

or

yarn add rex-setup-wizard-manager

Import

import rexWizard from "rex-setup-wizard-manager";

Usage in Vue

<template>
	<div class="wpfnl wpfnl-setup-wizard__container">
		<div class="wpfnl-setup-wizard__wrapper">
			<!-- <ul class="wpfnl-setup-wizard__nav"> -->
			<div id="wizardContainer">
				<!-- Wizard content will be dynamically inserted here -->
			</div>

			<!-- <WizardNav /> -->

			<button @click="prev" class="install">prev</button>
			<button @click="next" class="install">next</button>
		</div>
	</div>
</template>

<script>
//Import
import WizardNav from './WizardNav'
import rexWizard from 'rex-setup-wizard-manager'
const j = jQuery.noConflict()

export default {
	name: 'SetupWizard',

	components: {
		WizardNav,
	},
	data() {
		return {
			steps: [
				{
					stepText: 'Welcome',
					html: '<p>Welcome to Step 1 description of content</p>',
					isNextStep: true,
					isPreviousStep: false,
					isSkip: false,
				},
				{
					stepText: 'Type',
					html: '<p>Welcome to Step 2 description of content </p>',
					isNextStep: true,
					isPreviousStep: true,
					isSkip: true,
				},
				{
					stepText: 'Page Builder',
					html: '<p>Welcome to Step 3 description of content</p>',
					isNextStep: false,
					isPreviousStep: true,
					isSkip: false,
				},
				{
					stepText: 'Essential plugings',
					html: '<p>Welcome to Step 4 description of content</p>',
					isNextStep: false,
					isPreviousStep: true,
					isSkip: false,
				},
				{
					stepText: 'Subscribe',
					html: '<p>Welcome to Step 5 description of content</p>',
					isNextStep: false,
					isPreviousStep: true,
					isSkip: false,
				},
				{
					stepText: 'Done',
					html: '<p>Welcome to Step 6 description of content</p>',
					isNextStep: false,
					isPreviousStep: true,
					isSkip: false,
				},
			],
			currentStep: 0,
			logoUrl: 'http://techsite.local/wp-content/uploads/2024/04/logo-wpfnl.png',
			logoClass: 'wpfnl-setup-wizard__logo',
		}
	},

	mounted() {
		this.initializeWizard()
		window.handleClick = this.handleClick
	},

	methods: {
		handleClick() {
			console.dir('here.....')
		},

		initializeWizard() {
			this.wizard = rexWizard({
				general: {
					title: 'Welcome to the Wizard',
					currentStep: this.currentStep,
					logo: this.logoUrl, // Pass the logo URL to the wizard
					targetElement: 'wizardContainer',
					logoStyles: this?.logoClass,
					buttonStyles: this?.buttonClass,
				},
				steps: this.steps,
			})
		},

		prev() {
			this.wizard?.previousStep()
		},
		next() {
			this.wizard?.nextStep()
		},
	},

	watch: {
		currentStep(newVal, oldVal) {
			if (newVal !== oldVal) {
				this.initializeWizard()
			}
		},
	},
}
</script>

Usage in ReactJs

import rexWizard from "rex-setup-wizard-manager";

export const SetupWizard = () => {
  const [wizard, setWizard] = useState(null);

  const data = {
    steps: [
      {
        stepText: "Welcome",
        html: "<p>Welcome to Step 1 description of content</p>",
        isNextStep: true,
        isPreviousStep: false,
        isSkip: false,
      },
      {
        stepText: "Type",
        html: "<p>Welcome to Step 2 description of content </p>",
        isNextStep: true,
        isPreviousStep: true,
        isSkip: true,
      },
      {
        stepText: "Page Builder",
        html: "<p>Welcome to Step 3 description of content</p>",
        isNextStep: false,
        isPreviousStep: true,
        isSkip: false,
      },
      {
        stepText: "Essential plugings",
        html: "<p>Welcome to Step 4 description of content</p>",
        isNextStep: false,
        isPreviousStep: true,
        isSkip: false,
      },
      {
        stepText: "Done",
        html: "<p>Welcome to Step 6 description of content</p>",
        isNextStep: false,
        isPreviousStep: true,
        isSkip: false,
      },
    ],
    currentStep: 0, 
    logoUrl: "http://techsite.local/wp-content/uploads/2024/04/logo-wpfnl.png",
    logoClass: 'class-name',
  };

  const initializeWizard = () => {
    setWizard(
      rexWizard({
        general: {
          title: "Welcome to the Wizard",
          currentStep: data?.currentStep,
          logo: data?.logoUrl, // Pass the logo URL to the wizard
          targetElement: "wizardContainer",
          logoStyles: data?.logoClass,
        },
        steps: data?.steps,
      })
    );
  };

  useEffect(() => {
    initializeWizard();
  }, []);

  const prev = () => {
    wizard.previousStep();
  };
  const next = () => {
    wizard.nextStep();
  };

  return (
    <>
      <div id="wizardContainer">
        {/* <!-- Wizard content will be dynamically inserted here --> */}
      </div>

      <button onClick={prev} className="install">
        prev
      </button>
      <button onClick={next} className="install">
        next
      </button>
    </>
  );
};

Options

| Parameter | Type | Example | | ---------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | general | object | This parameter used to get data for attributes eg : title,currentStep, logo,targetElement logoStyles,buttonStyles | | steps | array of objects | This parameter used to get array of steps that array contains steps markup and many more eg : title,html,isNextStep,isPreviousStep,isSkip, |

Functions

| Methods | Description | | ------------------ | -------------------------------------------- | | rexWizard() | Base configuration of setup wizard | | previousStep() | Previous step of wizard | | nextStep() | Next step of wizard | | skipStep() | Next step of wizard and skip the current one | | getCurrentStep() | Current step index number starting from 0 |

Events

• No events available

License

MIT