React Web Guide 🚀

A beautiful and customizable website tour guide component for React applications. Help your users navigate through your website with an interactive and engaging tour experience.

Features ✨

• 🎯 Interactive cursor-based tour guide
• 🎨 Fully customizable styling
• 📱 Responsive design
• 🔄 Progress tracking
• ⚡ Smooth animations
• 🎭 Minimizable interface
• 🌈 Beautiful default UI with gradient effects

Installation and Setup 📦

This package utilizes Tailwind CSS for its styling. To ensure the styles are applied correctly in your project, please follow these steps:

1. Install Tailwind CSS (if you haven't already):

   If your project doesn't have Tailwind CSS set up, install it and its peer dependencies:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

   Refer to the official Tailwind CSS documentation for framework-specific installation guides.

2. Install React Web Guide:

   Install the package using npm:

   npm install @gajendra-naphade/react-web-guide

3. Include Package Styles:

   Import the package's compiled CSS file in your main application entry point or where you are using the package (e.g., src/main.jsx, src/App.jsx, or your root layout file):

   import '@gajendra-naphade/react-web-guide/dist/index.css';

4. Configure Tailwind Content:

   Add the path to the package's CSS file in your project's tailwind.config.js content array. This ensures that Tailwind processes the @apply directives used within the package's styles:

   // tailwind.config.js
   export default {
     content: [
   "./index.html",
   "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@gajendra-naphade/react-web-guide/dist/**/*.{js,ts,jsx,tsx}"

], theme: { extend: {}, }, plugins: [], } ```

Quick Start 🚀

import { TourGuide } from '@gajendra-naphade/react-web-guide';
import '@gajendra-naphade/react-web-guide/dist/index.css';

function App() {
  const steps = [
    {
      ref: yourRef,
      name: "Guide Name",
      color: "#ff6b6b",
      message: "Your message here",
      offsetX: 0, 
      offsetY: 0
    }
    // ... more steps
  ];

  return (
    <TourGuide 
      steps={steps}
      onComplete={() => console.log('Tour completed!')}
      startButtonText="Start Tour"
      skipButtonText="Skip Tour"
      showProgress={true}
      ProgressTheme="Light"
    />
  );
}

Props Documentation 📚

TourGuide Component Props

Step Object Structure

interface Step {
  ref: React.RefObject<HTMLElement>;  // Reference to the target element
  name: string;                       // Name shown in the cursor
  message: string;                    // Message to display
  color?: string;                     // Custom color for the cursor
  offsetX?: number;                   // Custom X offset for cursor position
  offsetY?: number;                   // Custom Y offset for cursor position
}

Example Usage 🎯

import { useRef } from 'react';
import { TourGuide } from '@gajendra-naphade/react-web-guide';
import '@gajendra-naphade/react-web-guide/dist/index.css';

function App() {
  const buttonRef = useRef(null);
  const featureRef = useRef(null);
  const settingsRef = useRef(null);

  const tourSteps = [
    {
      ref: buttonRef,
      name: "Welcome",
      message: "Click here to start your journey!",
      color: "#ff6b6b",
       offsetX: 0,
      offsetY: 0
    },
    {
      ref: featureRef,
      name: "Features",
      message: "Discover our amazing features!",
      color: "#4CAF50",
       offsetX: 0,
      offsetY: 0
    },
    {
      ref: settingsRef,
      name: "Settings",
      message: "Customize your experience here.",
      color: "#2196F3",
       offsetX: 0,
      offsetY: 0
    }
  ];

  return (
    <div>
      <button ref={buttonRef}>Start</button>
      <div ref={featureRef}>Features Section</div>
      <div ref={settingsRef}>Settings Section</div>

      <TourGuide 
        steps={tourSteps}
        onComplete={() => console.log('Tour completed!')}
        startButtonText="Begin Tour"
        showProgress={true}
        ProgressTheme="Dark"
      />
    </div>
  );
}

Contributing 🤝

Contributions are welcome! Please feel free to submit a Pull Request.

License 📄

MIT License - feel free to use this component in your projects!

Made with ❤️ by [Gajendra-Naphade]