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

React Web Guide is a customizable, interactive website tour component for React applications. Guide users through your app with engaging, cursor-based tours to enhance onboarding and user experience.

Features
Demo
Installation
Quick Start
Props Documentation
Example Usage
Contributing
License
Support

Features

Interactive Tours: Cursor-driven navigation for intuitive user guidance.
Customizable Styling: Match your app’s branding with ease.
Responsive Design: Seamless experience on desktop and mobile.
Progress Tracking: Clear indicators to show tour progress.
Smooth Animations: Fluid transitions for a polished look.
Minimizable UI: Compact interface to save screen space.
Modern UI: Beautiful default design with gradient effects.

Ideal for user onboarding, feature showcases, and guided tutorials in React apps.

Demo

See React Web Guide in action:

React Web Guide Demo

Installation

Install React Web Guide via npm or Yarn:

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

yarn add @gajendra-naphade/react-web-guide

pnpm add @gajendra-naphade/react-web-guide

Quick Start

Get started in minutes:

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

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

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

Props Documentation

Customize React Web Guide with these 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>; // Target element reference
  name: string;                     // Cursor display name
  message: string;                  // Tour message
  color?: string;                   // Cursor color
  offsetX?: number;                 // X offset for cursor
  offsetY?: number;                 // Y offset for cursor
}

Example Usage

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

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

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

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

Contributing

We welcome contributions! To get started:

Fork the repo.
Create a branch (git checkout -b feature/YourFeature).
Commit changes (git commit -m 'Add YourFeature').
Push to the branch (git push origin feature/YourFeature).
Open a Pull Request

License

MIT License - Use React Web Guide freely in your projects!

Support

Report bugs: GitHub Issues
Email: gajendra44.connect@gmail.com

Made with ❤️ by Gajendra Naphade

@gajendra-naphade/react-web-guide