@reactour/tour
examples
Basic example
This is the minimal example
Mask click
Example to show the customizable behavior of the Mask click event. Try clicking the Mask and the Tour will proceed to the next step.
Close click
Example to show the customizable behavior of the Close click event. Try clicking the ‘x’ and the Tour will proceed to the next step.
Disable Keyboard
Example to show how to disable keyboard behavior.
Scroll Smooth
Use smooth scroll between steps if they aren’t visible in viewport
Padding
Custom wrapper, mask and popover paddings
Prev and Next buttons
Custom handlers
Control currentStep externally. Useful when using global state.
RTL
RTL mode
Custom styles
Custom Tour, Mask and Popover components and parts styles
Disable Scroll
In this example, we are using afterOpen prop to lock the Y scroll and re-enable it through beforeClose prop.
Custom Badge
Create a custom Badge content
Disable dots navigation
Disable navigating through click in dots buttons
Disable interaction
Disable highlighted area interaction. This example shows how to disable the default behavior and how to add an extra functionality when clicking this area. Try to select the highlighted text.
Toggle navigation parts
Toggle Navigation parts as you want: badge, close button, prev & next buttons, dots or whole navigation zone.
Starts at
Start Tour at specific step. Keep in mind that the number is zero based, so 2 is the third step.