Package Exports

@gajendra-naphade/react-web-guide
@gajendra-naphade/react-web-guide/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gajendra-naphade/react-web-guide) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 with Tailwind CSS
📱 Responsive design
🔄 Progress tracking
⚡ Smooth animations
🎭 Minimizable interface
🎮 Keyboard navigation support
🌈 Beautiful default UI with gradient effects

Installation 📦

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

Quick Start 🚀

import { TourGuide } from '@gajendra-naphade/react-web-guide';

function App() {
  const tourSteps = [
    {
      ref: buttonRef,
      name: "Welcome",
      message: "Click here to start your journey!",
      color: "#ff6b6b"
    },
    // Add more steps...
  ];

  return (
    <TourGuide 
      steps={tourSteps}
      onComplete={() => console.log('Tour completed!')}
    />
  );
}

Props Documentation 📚

TourGuide Component Props

Prop	Type	Default	Description
`steps`	Array	`[]`	Array of tour steps (required)
`onComplete`	Function	-	Callback when tour completes
`startButtonText`	String	"Start Tour"	Text for the start button
`skipButtonText`	String	"Skip Tour"	Text for the skip button
`minimizedStartText`	String	"Start"	Text for minimized start button
`minimizedSkipText`	String	"Skip"	Text for minimized skip button
`showProgress`	Boolean	`true`	Show/hide progress indicator
`ProgressTheme`	String	"Light"	Progress theme ("Light" or "Dark")
`buttonPosition`	Object	`{ bottom: '1.5rem', right: '1.5rem' }`	Position of the control button
`expandedButtonClassName`	String	-	CSS classes for expanded button
`minimizedButtonClassName`	String	-	CSS classes for minimized button
`buttonStyle`	Object	`{}`	Custom styles for buttons
`CloseButtonText`	ReactNode	`<X size={16} />`	Close button content
`ExpandButtonText`	ReactNode	`<Maximize2 size={16} />`	Expand button content
`minimizedButtonStyle`	Object	-	Styles for minimized button
`closeButtonClassName`	String	-	CSS classes for close button
`expandButtonClassName`	String	-	CSS classes for expand button
`closeButtonStyle`	Object	`{}`	Custom styles for close button
`expandButtonStyle`	Object	`{}`	Custom styles for expand button
`cursorImage`	String	`null`	Custom cursor image URL
`messageBoxStyle`	Object	`{}`	Custom styles for message box
`cursorStyle`	Object	`{}`	Custom styles for cursor
`nextButtonText`	String	"Next →"	Text for next button
`nextButtonContinueText`	String	"Continue"	Text for continue button
`nextButtonClassName`	String	-	CSS classes for next button
`nextButtonStyle`	Object	`{}`	Custom styles for next button

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';

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

  const tourSteps = [
    {
      ref: buttonRef,
      name: "Welcome",
      message: "Click here to start your journey!",
      color: "#ff6b6b"
    },
    {
      ref: featureRef,
      name: "Features",
      message: "Discover our amazing features!",
      color: "#4CAF50"
    }
  ];

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

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

Tailwind CSS Setup

This package uses Tailwind CSS for styling. To use it in your project:

Install Tailwind CSS and its peer dependencies:

npm install -D tailwindcss postcss autoprefixer

Create a tailwind.config.js file in your project root:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@gajendra-naphade/react-web-guide/dist/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to your CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Configure PostCSS by creating a postcss.config.js file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

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]