React Tour Guide

React Tour Guide is a dynamic and lightweight solution designed to help developers create guided tours for their applications. Built entirely with React and TypeScript, it allows users to seamlessly onboard and navigate through key features and workflows of your application.

With advanced customization and enhanced interactivity, this package offers flexibility and ease of use for developers while ensuring an engaging experience for end users.

---

Key Features

- Skip and Restart Options
Provide intuitive controls like "Skip" and "Restart" buttons, allowing users to exit or replay the tour at any point.

- Keyboard Navigation
Navigate through tour steps effortlessly using keyboard shortcuts:

- Arrow Right to move forward
- Arrow Left to go back
- Esc to exit

- Dynamic Content Updates
Adapt tour content on the fly, reflecting changes based on user interactions or application state during the tour.

- Language Switcher
Offer multilingual support with a built-in language switcher, enabling users to switch between different languages (e.g., English,Gujarati).

- Responsive Design
Ensure compatibility across all device types, with a responsive layout that adapts popups and tour elements for mobile, tablet, and desktop screens.

- Tooltip Integration
Enhance the experience by including tooltips for additional explanations or context when users hover over specific elements during the tour.

- Step-Specific Actions
Enable custom actions triggered on specific steps, such as animations, toggling visibility of elements, or executing application logic.

---

Technology and Concept Used

$3

- React
The package is built using React, the popular JavaScript library for building user interfaces, especially for single-page applications. React's component-based architecture ensures that the tour guide is modular, reusable, and easy to maintain.

- TypeScript
TypeScript provides static typing to the package, offering enhanced developer support with features like type inference, error checking, and autocompletion. It improves the overall development experience, ensuring that code is more predictable and reliable.

- CSS
The package utilizes CSS for styling the tour popups, tooltips, and other UI components. It is easily customizable, allowing developers to modify the appearance of the tour guide according to the branding of their application.

- Vite
Vite is used to set up the project. It is a next-generation build tool that provides fast development builds and optimal production bundling. It improves the development experience by reducing the time for code changes to reflect on the screen.

$3

- Dynamic Tour Steps
Each tour step is defined by an id and content, allowing flexibility to configure different steps of the tour. The content can be dynamically updated based on user actions, making the tour adaptable to changes in the application.

- Responsive Design
The package ensures that the tour elements (popups, tooltips, and buttons) are responsive and work seamlessly across different devices, including desktops, tablets, and mobile phones.

- Multilingual Support
The package includes built-in support for multiple languages. Developers can specify different language content for each step of the tour, ensuring that users from different locales can enjoy a personalized experience.

- Step-Specific Actions
Each step can trigger custom actions such as animations, visibility toggles, or logic execution. This makes the tour not just informative but interactive and engaging.

---

Installation

$3

- Node.js: v16.0.0 or higher
- npm: v7.0.0 or higher

$3

Run the following command to create a Vite-based React project:

``bash
npm create vite@latest
`

After creating the Vite project, install the required dependencies for your React app.

$3

For proper styling, you can include the provided CSS file in your project. Customize as needed for your design.

---

How to Use

$3

Import the TourStepPopup component and provide it with an array of steps.

`tsx
import { TourStepPopup } from "./components/TourStep";
`

$3

Create an array of steps where each step is defined with id and content (supporting multilingual content).

`tsx
const steps = [
{
id: "step1",
content: {
en: "Welcome to the Header!",
gu: "હેડર પર સ્વાગત છે!",
},
},
{
id: "step2",
content: {
en: "Main Section on the left.",
gu: "ડાબી બાજુ પર મુખ્ય વિભાગ.",
},
},
// Additional steps
];
`

$3

Use the TourStepPopup component in your JSX, passing the steps array as a prop.

`tsx

`

$3

`tsx
import React from "react";
import "./App.css"; // Importing the CSS file
import { TourStepPopup } from "./components/TourStep";

const App: React.FC = () => {
const steps = [
{
id: "step1",
content: {
en: "Welcome to the Header!",
gu: "હેડર પર સ્વાગત છે!",
},
},
// Additional steps
];

return (


- Ensure that the TourStepPopup component is placed at the top level of your React component tree so that it can access the steps array and properly display the tour.
- For mobile responsiveness, use CSS media queries to modify the size and layout of the tour popups.


``