Multiroute-tour-navigator NPM

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