V3 is a complete rewrite focused on modern React patterns, smaller bundle size, and a more intuitive API.
Highlights
useJoyridehook — replacesgetHelperswith a proper hook returning controls, state, current step, failures, and event subscriptions- New event system — discriminated event types (
tour:start,step:before,tooltip, etc.) withonEvent(data, controls)and selective subscription viaon() - Step hooks — async
before/aftercallbacks for per-step logic - Floating UI — replaced Popper.js/react-floater with direct
@floating-ui/react-domintegration - Flexible targets —
scrollTargetandspotlightTargetfor independent positioning; targets acceptRefObject, callbacks, and CSS selectors - SVG overlay — precise spotlight rendering replacing CSS box-shadow
- Portal rendering — tour UI renders via React portal with custom container support
- New component props —
arrowComponent,loaderComponent - React 16.8–19 support
- ~30% smaller bundle through dependency replacement
Breaking changes
- Named export:
import { Joyride } from 'react-joyride' callbackreplaced byonEventproprundefaults tofalsegetHelpersreplaced byuseJoyride()hook- Step-level props consolidated into flat
options(set globally or per-step) styles.optionstheming moved tooptionsprop- Button visibility via
buttonsarray (['back', 'close', 'primary']) - Multiple prop renames (
disableBeacon→skipBeacon,disableCloseOnEsc→dismissKeyAction,floaterProps→floatingOptions, etc.) - Removed:
disableScrollParentFix,styles.spotlight, legacy overlay styles
Full migration guide: https://react-joyride.com/docs/migration
What's new: https://react-joyride.com/docs/new-in-v3
For a complete list of changes, check the PR.
We'd love your feedback! If you run into issues, have questions about migrating, or want to share ideas, join the discussion: #1196