elrumordelaluz/reactour
Reactour
Esta es una biblioteca de tours guiados y framework de onboarding para aplicaciones React. Proporciona un sistema para crear recorridos interactivos paso a paso utilizando popovers anclados a elementos y herramientas de enmascaramiento visual para resaltar componentes específicos de la interfaz.
La biblioteca se centra en la accesibilidad, proporcionando soporte integrado para lectores de pantalla y navegación por teclado para asegurar un onboarding de usuario inclusivo. Permite una amplia personalización al permitir el reemplazo de elementos de interfaz predeterminados, como insignias y botones, por componentes React personalizados.
El framework cubre la orquestación de tours mediante la gestión de estado y el targeting de elementos basado en selectores. Incluye capacidades para el desplazamiento automático del viewport, gestión de transiciones de popovers y la capacidad de restringir la interacción del usuario con la interfaz subyacente durante un recorrido.
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.
