Component

Overview

Ref : https://github.com/PHPCreation/frontend-crud-react-nextjs-bundle/tree/main/src/components/Tour 

The TourComponent is a component built on top of react-joyride that provides an interactive guided tour feature for Next.js apps. It supports single-page and multi-page tours, keyboard navigation, and dynamic tour startup.

Features

• Single-page tours: Guide users through features on a single page
• Multi-tour: Combine multiple tours on the same page
• Multi-page tours: Tours across multiple pages
• Keyboard navigation: Use arrow keys to navigate between tour steps
• Route-based tour loading: Automatically load tours (displayed in a dropdown) based on current page route
• Query string support: Start tours (optionally at a specific step) from Query String
• Custom styling: Fully customizable tooltips

Installation

The Tour component is in components bundle

Usage