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.