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.

$3

* 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 (


);
};

export default App;
`

Props

$3

| 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 |

$3

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