React Joyride
Overview
Search…
Overview
Props
Step
Styling
Custom Components
Callback
Constants
Accessibility
Migration
Powered By GitBook
Props
The only required prop is steps with an array of steps. Below is the complete list of possible props and options:
▶︎ indicates the default value if there's one
beaconComponent {ReactNode} A React component or function to be used instead the default Beacon. Check custom components for details.
callback {() => CallbackProps} It will be called when Joyride's state changes. it returns a single parameter with the state.
continuous {boolean} ▶︎ false The tour is played sequentially with the Next button.
debug {boolean} ▶︎ false Log Joyride's actions to the console.
disableCloseOnEsc {boolean} ▶︎ false Disable closing the tooltip on ESC.
disableOverlay {boolean} ▶︎ false Don't show the overlay.
disableOverlayClose {boolean} ▶︎ false Don't close the tooltip when clicking the overlay.
disableScrolling {boolean} ▶︎ false Disable auto scrolling between steps.
disableScrollParentFix {boolean} ▶︎ false Disable the fix to handle "unused" overflow parents
floaterProps {object} Options to be passed to react-floater.
getHelpers {() => StoreHelpers} Get the store methods to control the tour programmatically. prev, next, go, close, skip, reset, info
hideBackButton {boolean} ▶︎ false Hide the "back" button.
hideCloseButton {boolean} ▶︎ false Hide the "close" button.
locale {object} ▶︎ { back: 'Back', close: 'Close', last: 'Last', next: 'Next', open: 'Open the dialog', skip: 'Skip' } The strings used in the tooltip.
nonce {string} A nonce value for inline styles (Content Security Policy - CSP)
run {boolean} ▶︎ true Run/stop the tour.
scrollOffset {number} ▶︎ 20 The scroll distance from the element scrollTop value.
scrollDuration {number} ▶︎ 300 The duration for scroll to element.
scrollToFirstStep {boolean} ▶︎ false Scroll the page for the first step.
showProgress {boolean} ▶︎ false Display the tour progress in the next button _e.g. 2/5 _in continuous tours.
showSkipButton {boolean} ▶︎ false Display a button to skip the tour.
spotlightClicks {boolean} ▶︎ false Allow mouse and touch events thru the spotlight. You can click links in your app.
spotlightPadding {number} ▶︎ 10 The padding of the spotlight.
stepIndex {number} Setting a number here will turn Joyride into controlled mode.
You'll have to keep an internal state by yourself and update it with the events in the callback.
Do not use this if you don't need it.
steps {Array<Step>} - required The tour's steps. Check the step docs for more information.
styles {object} Override the styling of the Tooltip globally
tooltipComponent {React.Node} A React component or function to be used instead the default Tooltip excluding the arrow. Check custom components for details.
Previous
Overview
Next
Step
Last modified 1mo ago
Copy link