🎯 React Feature Guide

A powerful, lightweight React component for creating interactive guided tours in your web applications. Perfect for onboarding, feature introductions, and user tutorials.

✨ Key Features

• 🎯 Smart positioning system that automatically adjusts to viewport size
• 🖼️ Support for custom images in each tour step
• 📱 Fully responsive across all devices
• ⌨️ Keyboard navigation support (←, →, Esc)
• 🎨 Extensive theme customization
• 🔊 Built-in text-to-speech capability
• 🖱️ Interactive element highlighting
• ♿ Accessibility-friendly
• 🌐 Multi-step navigation
• 🏃‍♂️ Zero dependencies
• Popup size and position adjusts according to the image size you provide

🚀 Installation

npm install react-webtour-popup

📖 Basic Usage

import { TourGuide } from 'react-feature-guide';

const steps = [
  {
    id: 'feature-1',
    title: 'Amazing Feature',
    description: 'Discover how this feature transforms your workflow',
    image: {
      src: '/path/to/feature-image.png',
      alt: 'Feature demonstration',
      width: 300,
      height: 200
    }
  }
];

function App() {
  return <TourGuide steps={steps} />;
}

🎨 Customization

Welcome Screen Image

// Custom welcome image
<TourGuide 
  steps={steps}
  welcomeImage={{
    src: '/path/to/welcome.png',
    alt: 'Welcome to our app',
    className: 'custom-welcome-image'
  }}
/>

// Default image will be used if welcomeImage is not provided

Theme Configuration

const colorConfig = {
  Modal: '#ffffff',
  textColor: '#2c3e50',
  buttonColor: '#3498db',
  overlayBackgroundColor: 'rgba(0, 0, 0, 0.75)',
  highlightColor: '#e74c3c'
};

<TourGuide steps={steps} colorConfig={colorConfig} />

📋 Props Reference

TourGuide Component

| Prop | Type | Required | Description | |------|------|----------|-------------| | steps | TourStep[] | Yes | Array of tour steps | | welcomeImage | ImageConfig | No | Custom welcome screen image | | colorConfig | ColorConfig | No | Theme customization |

Step Configuration

interface TourStep {
  id: string;              // Target element ID
  title: string;           // Step title
  description: string;     // Step description
  image?: {               // Optional step image
    src: string;
    alt?: string;
    width?: number;
    height?: number;
    className?: string;
  };
  knowMoreUrl?: string;   // Optional external link
}

🎯 Advanced Features

Keyboard Navigation

• → Next step
• ← Previous step
• Esc Exit tour

Voice Guidance

Built-in text-to-speech for accessibility:

<TourGuide steps={steps} enableVoiceGuide={true} />

🚧 Browser Support

• Chrome/Edge ≥ 79
• Firefox ≥ 67
• Safari ≥ 14
• Opera ≥ 66

📦 Size

• 12.3kB minified
• 4.2kB gzipped

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines first.

📄 License

MIT © Vishvam Amin