Multiroute Tour Navigator builds on Tour Navigator's foundation, enabling the creation of dynamic, multi-step tours for React websites.
npm install multiroute-tour-navigatorMultiRoute 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:
``bash`
npm install tour-navigator multiroute-tour-navigatoror
yarn add tour-navigator multiroute-tour-navigator
javascript
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 (
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
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 |
$3
`typescript
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.