elrumordelaluz/reactour

Features

• Product Tour Libraries - Provides a comprehensive library for building interactive, multi-step product walkthroughs within React applications.
• User Onboarding Tours - Provides a complete framework for creating interactive guided sequences that introduce users to product features.
• Accessible Walkthroughs - Provides interactive walkthroughs with built-in screen reader support and keyboard navigation for inclusive onboarding.
• Focus Masks - Generates a dynamic visual mask that highlights active interface components while obscuring the rest of the screen.
• Contextual Guidance Systems - Provides a framework for delivering real-time user assistance via anchored floating information panels.
• Interactive Feature Education - Guides users through complex workflows by visually masking the interface and highlighting key functional areas.
• UI Tooltips - Displays floating information panels anchored to specific interface elements to provide on-demand user guidance.
• Interface Element Highlighting - Provides visual emphasis of specific UI components using masks and spotlights to guide user attention.
• Onboarding Frameworks - Provides a framework for creating instructional sequences to guide new users through the interface.
• Popovers - Implements floating information panels anchored to specific interface elements to provide contextual guidance.
• Interface Masking Components - Ships a utility to obscure the screen with a visual mask that draws attention to specific React components.
• Popover Movement Transitions - Controls the smooth repositioning of popups as the user scrolls or moves between highlighted elements.
• Tour State Management - Manages the internal state of the tour, tracking the current step index and visibility to orchestrate the sequence.
• Accessibility Configuration - Allows global configuration of labels and screen reader visibility for tour navigation and controls.
• Element-Centric Auto-Scrolling - Automatically scrolls the window smoothly to ensure the target element and its popover are within the viewport.
• Element Targeting - Uses CSS selectors to identify DOM elements for anchoring popovers and creating precise visual masks.
• Custom Component Injection - Provides mechanisms for replacing default tour UI elements with custom React components via prop-based injection.
• Custom Onboarding Components - Enables replacing default tour elements like buttons and badges with custom components to match design systems.
• Guidance Interaction Restrictions - Allows blocking user input on highlighted elements during a walkthrough to control the user experience.
• Keyboard Navigation - Supports keyboard navigation for moving between tour steps and exiting the walkthrough for better accessibility.
• Positioned Popovers - Implements floating popovers that are precisely positioned relative to target elements using screen coordinates.
• Tour Flow Controls - Implements mechanisms for managing user progression, including programmatic step updates and event-driven controls.
• Tour Visibility Controls - Enables showing or hiding the tour sequence based on specific user interactions or system events.
• Tour State Monitoring - Tracks the current step and visibility of the guided tour across different parts of the user interface.
• Viewport Scrolling Control - Automatically scrolls the browser window to bring off-screen target elements into the visible area.

Star history