tour-navigator v1.0.23

Tour Navigator

Tour Navigator is a React package designed to facilitate the creation of customizable tours for React websites.

Installation

To install Tour Navigator, you can use npm or yarn:

npm install tour-navigator 
# or 
yarn add tour-navigator

Usage

import TourNavigator from 'tour-navigator';
import { Align, Position } from "tour-navigator/lib/TourNavigator/types";

// Define your steps
const steps = [
  {
    selector: '.step1',
    data: { /* Step data */ },
    position: Position.LEFT,
    align: Align.START
  },
  {
    selector: '.step2',
    data: { /* Step data */ },
    position: Position.BOTTOM,
    align: Align.CENTER
  },
  // Add more steps as needed
];

// Set up Tour Navigator with your steps
<TourNavigator
  id="my-tour"
  steps={steps}
/>

Demo

Check out the live demo here.

CodeSandbox Example

For a live interactive example, you can check out this CodeSandbox.

Step

 Tour Navigator

Tour Navigator is a React package designed to facilitate the creation of customizable tours for React websites.

## Installation

To install Tour Navigator, you can use npm or yarn:

```bash
npm install tour-navigator 
# or 
yarn add tour-navigator

Usage

import TourNavigator from 'tour-navigator';
import { Align, Position } from "tour-navigator/lib/TourNavigator/types";

// Define your steps
const steps = [
  {
    selector: '.step1',
    data: { /* Step data */ },
    position: Position.LEFT,
    align: Align.START
  },
  {
    selector: '.step2',
    data: { /* Step data */ },
    position: Position.BOTTOM,
    align: Align.CENTER
  },
  // Add more steps as needed
];

// Set up Tour Navigator with your steps
<TourNavigator
  id="my-tour"
  steps={steps}
/>

Demo

Check out the live demo here.

CodeSandbox Example

For a live interactive example, you can check out this CodeSandbox.

Step

type IntersectionOption = {
  root?: Element | Document | string | null; // Default: null
  rootMargin?: string; // Default: dynamically adjusted
  threshold?: number; // Default: dynamically adjusted
}
  
type Step = {
  selector: string;
  align?: Align,
  position?: Position | [Position, Position, Position, Position];
  data: any,
  scrollIntoView?: boolean;  // Default: true (Whether scroll to view element or not)
  intersectionOption?: IntersectionOption | (intersectionOption: IntersectionOption) => IntersectionOption;
}

HelperProps

type HelperProps = {
    id?: string;
    currentStep: Step | null;
    target: HTMLElement | null;
    currentStepIndex: number;
    previousStepIndex: number;
    steps: Step[];
    isScrollingIntoView: boolean; // Whether scrolling element into view or not
    focus: (scrollBehavior?: 'auto' | 'smooth') => void; // programmatically focus current targe, In case it loses
    goto: (stepIndex: number) => void; // goto any specific steps
    next: () => void;
    prev: () => void;
    onRequestClose: ((params: {event: MouseEvent | PointerEvent, isMask: boolean, isOverlay: boolean}) => void) | null
}

Passing Ref to TourNavigator

Since TourNavigator is a class component, you can use ref to access various built-in methods directly for enhanced customization.

This README provides an overview of the package, its usage, props, and default props. Let me know if you need further modifications or additions!

License

This project is licensed under the MIT.