Package Exports

multiroute-tour-navigator
multiroute-tour-navigator/lib/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 (multiroute-tour-navigator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

MultiRoute Tour Navigator

MultiRoute Tour Navigator is a React component that extends the functionality of Tour Navigator by providing the ability to create multi-route tours for React websites. Tour Navigator to be installed alongside this package.

Installation

To use MultiRoute Tour Navigator, make sure you have tour-navigator installed in your project:

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

Usage

Import MultiRouteTour from multiroute-tour-navigator and use it in your React components to define multi-route tours.

import { MultiRouteTour } from 'multiroute-tour-navigator';
import { useLocation, useNavigate } from 'react-router-dom';
import { useHistory } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <MultiRouteTour
      id="my-tour"
      steps={[ /* Array of steps */ ]}
      state={location?.state?.tour} // we won't have state for first page
      nextStepRoute="/about"
      onNavigate={(route, state) => navigate(route, {state: {tour: state}, replace: true}) //  include state while navigating
      nextStepCount={4}
      number={2}
    />
  );
};

Props

MultiRouteTour component accepts props similar to TourNavigator, along with additional props specific to multi-route tours:

Prop	Type	Description
nextStepCount	number	Number of steps after transitioning to the next route.
nextStepRoute	string	Route to navigate to after completing the current tour on this route.
number	number	Number representing the current route in the multi-route tour. If not provided, it will automatically take the next route in sequence.
replace	boolean	Whether to replace the current route in history while navigating. Default: false.
state	array	State from previous tour page
onNavigate	(route, state) => {}	Function invokes when tour is completed for current page pass state while navigate to next tour.
ref
...	-	Other props from TourNavigatorProps

MultiRouteTourRefProps

interface MultiRouteTourRefProps {
  id: string;
  currentStep: Step | null;
  target: HTMLElement | null;
  currentStepIndex: number;
  previousStepIndex: number;
  steps: Step[] | null;
  isScrollingIntoView: boolean;
  focus: (scrollBehavior?: 'auto' | 'smooth') => void;
  goto: (stepIndex: number) => void;
  next: () => void;
  prev: () => void;
  onRequestClose: (params: { event: MouseEvent | PointerEvent; isMask: boolean; isOverlay: boolean }) => void;
}

License

This project is licensed under the MIT.