Props | React Joyride (original) (raw)

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. You can check the definition of the type for the props here.

beaconComponent ElementType<BeaconRenderProps>A React component to use instead of the default Beacon. Check custom components for details.

callback () => CallBackPropsA function to be called when Joyride's state changes. It returns a single parameter with the state.

continuous boolean ▶︎ falseThe tour is played sequentially with the Next button.

debug boolean ▶︎ falseLog Joyride's actions to the console.

disableCloseOnEsc boolean ▶︎ falseDisable closing the tooltip on ESC.

disableOverlay boolean ▶︎ falseDon't show the overlay.

disableOverlayClose boolean ▶︎ falseDon't close the tooltip when clicking the overlay.

disableScrolling boolean ▶︎ falseDisable autoscrolling between steps.

disableScrollParentFix boolean ▶︎ falseDisable the fix to handle "unused" overflow parents.

floaterProps Partial<FloaterProps>Options to be passed to react-floater.

getHelpers (helpers: StoreHelpers) => voidGet the store methods to control the tour programmatically. prev, next, go, close, skip, reset, info.

hideBackButton boolean ▶︎ falseHide the Back button.

hideCloseButton boolean ▶︎ falseHide the Close button.

locale Locale ▶︎ **{ back: 'Back', close: 'Close', last: 'Last', next: 'Next', nextLabelWithProgress: 'Next (Step {step} of {steps})', open: 'Open the dialog', skip: 'Skip' }**The strings used in the tooltip.

nonce stringA nonce value for inline styles (Content Security Policy - CSP)

run boolean ▶︎ trueRun/stop the tour.

scrollDuration number ▶︎ 300The duration for scroll to element.

scrollOffset number ▶︎ 20The scroll distance from the element scrollTop value.

scrollToFirstStep boolean ▶︎ falseScroll the page for the first step.

showProgress boolean ▶︎ falseDisplay the tour progress in the next button, 2/5, in continuous tours.

showSkipButton boolean ▶︎ falseDisplay a button to skip the tour.

spotlightClicks boolean ▶︎ falseAllow mouse and touch events through the spotlight. You can click links in your app.

spotlightPadding number ▶︎ 10The padding of the spotlight.

stepIndex numberSetting a number here will turn Joyride into controlled mode.

You'll have to keep an internal state and update it with the events in the callback.

Do not use it if you don't need it.

steps Array<Step> - requiredThe tour's steps. Check the step docs for more information.

styles Partial<Styles>Override the styling of the Tooltip

tooltipComponent ElementType<TooltipRenderProps>A React component to use instead of the default Tooltip. Check custom components for details.

Last updated 9 months ago