Migration

React Joyride

Overview

Search…

Overview

If you are coming from V1 make sure to follow this guide to upgrade your setup.

Styling
V2 uses inline styles instead of SCSS/CSS so you need to remove the imports. Check Styling for more information.
Props
Renamed (breaking)
allowClicksThruHole ▶︎ spotlightClicks
disableOverlay false ▶︎ disableOverlayClicks false
keyboardNavigation true ▶︎ disableCloseOnEsc false
the space, return and tab keys are now controlled with tabIndex
scrollToSteps true ▶︎ disableScrolling false
showBackButton true ▶︎ hideBackButton false
showOverlay true ▶︎ disableOverlay false
showStepsProgress false ▶︎ showProgress false
tooltipOffset 30 ▶︎ Use the step floaterProps.offset
type 'single' ▶︎ continuous false
Removed (breaking)
autoStart (use the disableBeacon prop on the first step)
offsetParent
resizeDebounce
resizeDebounceDelay
Step
There are a few changes to the step syntax too:
selector ▶︎ target
Now it supports HTMLElement and string.
position ▶︎ placement
The default is bottom now
text ▶︎ content
type ▶︎ event
allowClicksThruHole ▶︎ spotlightClicks
style ▶︎ styles
The properties have changed. Be sure to update to the new syntax.

Accessibility

Last modified 9mo ago

Copy link

Outline