<h1>React-Step-Guide</h1>
npm install react-step-guideThe React-Step-Guide component is a guided tour overlay for web applications, helping users navigate through specific features or elements on a page.
It highlights elements in a sequence and displays an informational popup with navigation controls.
1) Automatically highlights elements specified in the steps.
2) Displays a popup with customizable content for each step.
3) Smooth scrolling to bring elements into view.
4) Calculates optimal popup positioning dynamically.
5) Provides controls for navigation (Next, Previous, Skip).
6) Handles edge cases for limited screen space.
## Installation
``npm install React-Step-Guide`
or yarn add React-Step-Guide`
Ensure you have a React application set up.You can use create-react-app or any other React setup.
Copy the TourGuide.tsx file into your project’s components folder.
Install the necessary dependencies (if not already installed):
`npm install react`
import TourGuide in yourProject and with step array and flag.
This package provides a React-tourGuide hook that you can use to track the tour's dynamically of your website.
`import { TourGuide } from "./components/TourGuide"`
isTourActive={isTourActive}
onClose={() => setIsTourActive(false)}
/>
import React, { useState } from "react";
import { TourGuide } from "./components/TourGuide"; //Tour Guide Component Will import
import "./components/TourGuide.css";import React, { useState } from "react";
import { TourGuide } from "./components/TourGuide";
import "./components/TourGuide.css";
const App = () => {
const [isTourActive, setIsTourActive] = useState(false);
const steps = [
{ id: "step1", content: "This is step 1." },
{ id: "step2", content: "This is step 2." },
{ id: "step3", content: "This is step 3." },
];
return (
Step 1 Element
Step 2 Element
Step 3 Element
isTourActive={isTourActive}
onClose={() => setIsTourActive(false)}
/>
);
};
export default App;
| Key | Type | Description |
|-------|--------|---------------------------|
| step | Array | step array defined how much step will go. |
| flag | boolean | flag will be define step show and hide. |