tour-guide-vasu-cct

TourGuide React Component

TourGuide is a customizable and interactive step-by-step guide for your web application. It allows developers to create guided tours for users, highlighting specific elements on the page and displaying contextual information.

Features

• Interactive Highlighting: Highlights specific elements on the page to guide user attention.
• Customizable Design: Modify colors and styles using props or local storage configurations.
• Responsive Support: Works seamlessly across mobile, tablet, and desktop screens.
• Dynamic Positioning: Calculates the optimal position for popups based on viewport dimensions and element location.
• Restart and Skip Options: Easily restart or skip the tour at any time.
• Color Customization: Allows users to customize the overlay, text, and button colors.
• Text-to-Speech (TTS): Provides an optional text-to-speech feature to read out the step descriptions.

Installation

To install the TourGuide component, use npm or yarn:

npm i tour-guide-vasu-cct

or

yarn add tour-guide-vasu-cct

Usage

Step 1: Add the TourGuide Component

Import and use the TourGuide component in your application. You need to pass the steps prop, which is an array of steps to guide the user. The new props system also allows for specifying advanced configurations like colorConfig and enabling text-to-speech.

import React from 'react';
import { TourGuide } from 'tour-guide-vasu-cct';

const steps = [
  {
    id: 'step1',
    title: 'Welcome to Step 1',
    description: 'This is the first step of the tour.',
    logoUrl: 'https://example.com/logo1.png',
  },
  {
    id: 'step2',
    title: 'Step 2',
    description: 'Here is some additional information.',
    logoUrl: 'https://example.com/logo2.png',
  },
];

const App = () => {
  return (
    <div>
      <TourGuide
        steps={steps.map((step) => ({
          ...step,
          content: step.description, // Used for text-to-speech if enabled
        }))}
        colorConfig={{
          Modal: '#f8f9fa',
          textColor: '#212529',
          buttonColor: 'blue',
          overlayBackgroundColor: 'rgba(0, 0, 0, 0.7)',
          highlightColor: 'black',
        }}
        enableTTS={true} // Enable text-to-speech feature
      />
    </div>
  );
};

export default App;

Step 2: Add the Target Elements

Add elements to your page that correspond to the id values in your steps array.

<div id="step1">This is the first element to highlight.</div>
<div id="step2">This is the second element to highlight.</div>

Step 3: Customize Colors

You can customize the colors of the tour guide modal, text, and buttons by passing a colorConfig object as a prop or saving it in local storage.

Example Configuration

{
  "Modal": "#f8f9fa",
  "textColor": "#212529",
  "buttonColor": "blue",
  "overlayBackgroundColor": "rgba(0, 0, 0, 0.7)",
  "highlightColor": "black"
}

Step 4: Enable Text-to-Speech (Optional)

Enable the text-to-speech feature by setting the enableTTS prop to true. This feature will read out the content property of each step.

Props

TourGuide

Prop	Type	Description
steps	Array	Array of step objects for the tour guide.
colorConfig	Object	Configuration object for customizing colors.
onComplete	Function	Callback function when the tour is completed.

Step Object

Property	Type	Description
id	string	The id of the target element to highlight.
title	string	Title displayed in the popup.
description	string	Description displayed in the popup.
content	string	Content to be read out via text-to-speech (if enabled).
logoUrl	string	URL for an optional logo image.

Dependencies

This component relies on the following dependencies:

• React
• useViewport: A custom hook for detecting viewport width.
• Web Speech API: Used for the text-to-speech functionality.

License

This project is licensed under the MIT License.

---

Author

Vasu Vachhani