Custom Components

Last updated 2 months ago

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

const pulse = keyframes`
0% {
transform: scale(1);
}
55% {
background-color: rgba(255, 100, 100, 0.9);
transform: scale(1.6);
}
`;
const Beacon = styled.span`
animation: ${pulse} 1s ease-in-out infinite;
background-color: rgba(255, 27, 14, 0.6);
border-radius: 50%;
display: inline-block;
height: 3rem;
width: 3rem;
`;
const BeaconComponent = props => <Beacon {...props} />;
export () => (
<div>
<ReactJoyride
beaconComponent={BeaconComponent}
...
/>
</div>
);

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

const Tooltip = ({
continuous,
index,
step,
backProps,
closeProps,
primaryProps,
tooltipProps,
}) => (
<TooltipBody {...tooltipProps}>
{step.title && <TooltipTitle>{step.title}</TooltipTitle>}
<TooltipContent>{step.content}</TooltipContent>
<TooltipFooter>
{index > 0 && (
<Button {...backProps}>
<FormattedMessage id="back" />
</Button>
)}
{continuous && (
<Button {...primaryProps}>
<FormattedMessage id="next" />
</Button>
)}
{!continuous && (
<Button {...closeProps}>
<FormattedMessage id="close" />
</Button>
)}
</TooltipFooter>
</TooltipBody>
);
export () => (
<div>
<ReactJoyride
tooltipComponent={Tooltip}
...
/>
</div>
);