elrumordelaluz/reactour
Reactour
Il s'agit d'une bibliothèque de visite guidée et d'un framework d'onboarding pour les applications React. Il fournit un système pour créer des visites interactives étape par étape en utilisant des popovers ancrés aux éléments et des outils de masquage visuel pour mettre en évidence des composants d'interface spécifiques.
La bibliothèque se concentre sur l'accessibilité, fournissant un support intégré pour les lecteurs d'écran et la navigation au clavier afin d'assurer un onboarding utilisateur inclusif. Elle permet une personnalisation étendue en permettant le remplacement des éléments d'interface par défaut, tels que les badges et les boutons, par des composants React personnalisés.
Le framework couvre l'orchestration de la visite via la gestion d'état et le ciblage d'éléments basé sur des sélecteurs. Il inclut des capacités pour le défilement automatique de la fenêtre, la gestion des transitions de popover et la capacité de restreindre l'interaction de l'utilisateur avec l'interface sous-jacente pendant une visite.
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.
