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.
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
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}
/>
);
};
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 |
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;
}
This project is licensed under the MIT.