step-guide-react

React Tour-Guide

The React Tour Guide is an interactive tool that guides users through steps in a web app, featuring a modal, navigation buttons, step indicators, and tooltips. It’s customizable, responsive, and built with React and TypeScript for scalability and ease of use.

Features of the React Tour Guide

• Step navigation with "Next," "Previous," and clickable step indicators.
• Interactive modal with dynamic positioning and element highlighting.
• Tooltips for contextual guidance and step-specific messages.
• Flexible step configuration with customizable titles, content, and targets.
• Responsive, accessible design with smooth scrolling.

Installation

Install the package using npm or yarn:

npm install step-guide-react`

Or with yarn:

yarn add react-tour-guide

Usage

Here's an example of how to use the React Tour Guide:

import React, { useState } from "react";
import Model from "step-guide-react";

const App = () => {
  const [isOpen, setIsOpen] = useState(true);

  const steps = [
    { title: "Step 1", content: "This is the first step", target: "step1" },
    { title: "Step 2", content: "This is the second step", target: "step2" },
    { title: "Step 3", content: "This is the third step", target: "step3" },
  ];

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Start Tour</button>
      <Model
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        stepsConfig={steps}
        totalSteps={steps.length}
      />
      <div id="step1">Step 1 Target</div>
      <div id="step2">Step 2 Target</div>
      <div id="step3">Step 3 Target</div>
    </div>
  );
};

export default App;

Props

Modal Props

Prop	Type	Description
isOpen	boolean	Determines if the modal is open
onClose	() => void	Callback to close the modal
stepsConfig	Array	Configuration for each step (title, content,target)
totalSteps	number	Total number of steps in the tour

ButtonGroup Props

Prop	Type	Description
onNext	() => void	Callback when the "Next" button is clicked
onPrevious	() => void	Callback when the "Previous" button is clicked
currentStep	number	Current active step
totalSteps	number	Total steps in the tour
isNextDisabled	boolean	Disables the "Next" button if true
isPreviousDisabled	boolean	Disables the "Previous" button if true

License

This project is licensed under the MIT License. See the LICENSE file for details.