Custom Components
You can use custom components to have complete control of the UI. They will receive data through props and need to be a React class or forwardRef since it needs to set ref
If you are looking to customize the default UI, check the styling docs.
beaconComponent
Props
aria-label {string}: the open property in the locale
object.
onClick {function}: internal method to call when clicking
onMouseEnter {function}: internal method to call when hovering
title {string}: the open property in the locale
object.
ref {function}: set the beacon ref
Example with styled-components
tooltipComponent
Props
continuous {boolean}: If the tour is continuous or not
index {number}: The current step's index
isLastStep {boolean}: The name says it all
size {number}: The number of steps in the tour
step {object}: The current step data
backProps {object}: The back button's props
closeProps {object}: The close button's props
primaryProps {object}: The primary button's props (Close or Next if the tour is continuous)
skipProps {object}: The skip button's props
tooltipProps {object}: The root element props (including ref
)
Example with styled-components
Last updated