react-tour-guide-cct-new

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

Technology Stack

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

Key Concepts

• 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

Requirements

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

Install Dependencies

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

npm create vite@latest

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

Add Tour Guide Styles

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

---

How to Use

1. Import the TourStepPopup Component

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

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

2. Define the steps Array

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

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

3. Include the TourStepPopup Component in Your JSX

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

<TourStepPopup steps={steps} />

4. Example Usage

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 (
    <div className="main-container">
      <section className="section intro">
        <h2>Welcome to the Unique Features of the React Tour</h2>
      </section>

      {/* Additional sections for steps */}

      <TourStepPopup steps={steps} />
    </div>
  );
};

export default App;

## Additional Notes

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