step-guide-react/README.md

<div class="align" ><h1>React Tour-Guide</h1></div>

<div class="align" ><h1>React Tour-Guide</h1></div>

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:

```bash
npm install step-guide-react`
```

Or with yarn:

```bash
yarn add react-tour-guide

```
## Usage

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

```tsx
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.
```