React Joyride

Spec sheet

Purpose

React Joyride creates guided tours for apps using interactive, step-by-step tooltips to showcase features or explain functionality.Read 4 Oct 2026 · react-joyride.com

Product

React Joyride creates guided tours that showcase app features or explain functionality with interactive walkthroughs.Read 11 Oct 2026 · react-joyride.com

Integrations

The docs provide a recipe for using React Joyride with the Next.js App Router, with the hook behind a client boundary.Read 4 Oct 2026 · react-joyride.com

License

The project package metadata lists the MIT license.Read 11 Oct 2026 · github.com

Accessibility

The accessibility guide describes WAI-ARIA support, keyboard navigation, and a focus trap that restores focus when the tooltip closes.Read 11 Oct 2026 · react-joyride.com

Bundle size

The V3 documentation describes the bundle as approximately 30% smaller than V2.Read 4 Oct 2026 · react-joyride.com

Configuration

Tour options can control appearance, overlay, beacon, navigation buttons, asynchronous hooks, and scroll animation.Read 11 Oct 2026 · react-joyride.com

Customization

The library allows developers to replace its UI components, including the arrow, beacon, and tooltip.Read 11 Oct 2026 · react-joyride.com

Distribution

The project page provides installation instructions for npm, pnpm, yarn, and bun.Read 11 Oct 2026 · react-joyride.com

Migration limit

The V2-to-V3 migration codemod requires manual review for patterns including spread props, dynamic or conditional values, and some hook migrations.Read 4 Oct 2026 · react-joyride.com

Positioning

Tooltip positioning uses `@floating-ui/react-dom` and supports configurable middleware, flip and shift behavior, and positioning strategy.Read 4 Oct 2026 · react-joyride.com

React compatibility

The package metadata lists React and React DOM peer dependency versions 16.8 through 19.Read 11 Oct 2026 · github.com

Rendering

Tour UI renders through a React portal, and `portalElement` can specify a custom container instead of `document.body`.Read 4 Oct 2026 · react-joyride.com

Security configuration

The props reference documents a `nonce` prop for inline styles to support Content Security Policy.Read 4 Oct 2026 · react-joyride.com

Setup

The getting-started guide says the only required prop is `steps`, and `run={true}` starts the tour.Read 11 Oct 2026 · react-joyride.com

Step hooks

Steps can run asynchronous logic before a step with `before` or cleanup logic with `after`.Read 4 Oct 2026 · react-joyride.com

Tour control

The getting-started guide describes a `useJoyride` hook that provides controls, state, and events.Read 11 Oct 2026 · react-joyride.com

Tour controls

The `useJoyride()` hook provides tour controls, state, the current step, failures, and event subscriptions.Read 4 Oct 2026 · react-joyride.com

Where Specifiction places it

• User Onboarding Software#30 of 306.7