React Joyride
React Joyride adds guided, step-by-step tours to web apps built with React, using interactive tooltips to introduce features or explain how parts of an app w…
What React Joyride is
React Joyride adds guided, step-by-step tours to web apps built with React, using interactive tooltips to introduce features or explain how parts of an app work. The free, open-source project supports React 16.8 through React 19 and installs with a package manager, including with `npm install react-joyride`. Developers can customize components, styles, behavior, beacons, tooltips, and overlays. The `useJoyride()` hook offers tour controls, state, the current step, failures, and event subscriptions; steps can run asynchronous logic before starting and cleanup afterward. Tooltip placement uses `@floating-ui/react-dom` with configurable middleware, flip and shift behavior, and positioning strategy. The tour renders through a React portal, with `portalElement` available to choose a container other than `document.body`. The tooltip uses an alertdialog role and modal ARIA attribute, traps keyboard focus while open, and restores focus when closed. Documentation includes a Next.js App Router recipe and a `nonce` prop for inline styles under Content Security Policy. The V3 documentation describes the bundle as approximately 30% smaller than V2.
Good
- Free and open source.
- Supports React 16.8 through React 19.
- Customizable tooltips, overlays, beacons, and behavior.
- Steps support asynchronous setup and cleanup.
- Traps and restores keyboard focus.
Watch out
- No no-code builder.
- V2-to-V3 codemod needs manual review for some patterns.
Who it suits
React developers who want to guide users through app features with configurable tours may find it useful. It suits teams that need step hooks, portal rendering, or keyboard focus management.
Verdict
React Joyride provides configurable tours for React apps, with step-level logic and control through a hook. Its documentation notes that some V2-to-V3 migration patterns still need manual review.
The facts
Each one read from React Joyride's own pages, with the date it was checked.
What it does
- Accessibility
- The accessibility guide describes WAI-ARIA support, keyboard navigation, and a focus trap that restores focus when the tooltip closes.checked 11 Oct 2026
- Bundle size
- The V3 documentation describes the bundle as approximately 30% smaller than V2.checked 4 Oct 2026
- Configuration
- Tour options can control appearance, overlay, beacon, navigation buttons, asynchronous hooks, and scroll animation.checked 11 Oct 2026
- Customization
- The library allows developers to replace its UI components, including the arrow, beacon, and tooltip.checked 11 Oct 2026
- Distribution
- The project page provides installation instructions for npm, pnpm, yarn, and bun.checked 11 Oct 2026
- Integrations
- The docs provide a recipe for using React Joyride with the Next.js App Router, with the hook behind a client boundary.checked 4 Oct 2026
- License
- The project package metadata lists the MIT license.checked 11 Oct 2026
- Migration limit
- The V2-to-V3 migration codemod requires manual review for patterns including spread props, dynamic or conditional values, and some hook migrations.checked 4 Oct 2026
- Positioning
- Tooltip positioning uses `@floating-ui/react-dom` and supports configurable middleware, flip and shift behavior, and positioning strategy.checked 4 Oct 2026
- Product
- React Joyride creates guided tours that showcase app features or explain functionality with interactive walkthroughs.checked 11 Oct 2026
- Purpose
- React Joyride creates guided tours for apps using interactive, step-by-step tooltips to showcase features or explain functionality.checked 4 Oct 2026
- React compatibility
- The package metadata lists React and React DOM peer dependency versions 16.8 through 19.checked 11 Oct 2026
- Rendering
- Tour UI renders through a React portal, and `portalElement` can specify a custom container instead of `document.body`.checked 4 Oct 2026
- Security configuration
- The props reference documents a `nonce` prop for inline styles to support Content Security Policy.checked 4 Oct 2026
- Setup
- The getting-started guide says the only required prop is `steps`, and `run={true}` starts the tour.checked 11 Oct 2026
- Step hooks
- Steps can run asynchronous logic before a step with `before` or cleanup logic with `after`.checked 4 Oct 2026
- Tour control
- The getting-started guide describes a `useJoyride` hook that provides controls, state, and events.checked 11 Oct 2026
- Tour controls
- The `useJoyride()` hook provides tour controls, state, the current step, failures, and event subscriptions.checked 4 Oct 2026
Alternatives to React Joyride
- 1
Helppier
AndroidiOSWebAPI7.7From $49 a month - 2
Candu
Free planWebAPIExtension7.5From $199 a month - 3
Wakeline
Free planAndroidiOSWebExtension7.5From $41 a month - 4
Chameleon
WebAPIExtension7.2From $279 a month - 5
Guidez
Free planWebAPIExtension7.2From $79 a month - 6
Inline Manual
WebAPIExtensionSelf-hosted7.2From $3 a month