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
refbeaconComponent
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
1
import Joyride, { BeaconRenderProps, TooltipRenderProps } from 'react-joyride';
2
3
const pulse = keyframes`
4
0% {
5
transform: scale(1);
6
}
7
8
55% {
9
background-color: rgba(255, 100, 100, 0.9);
10
transform: scale(1.6);
11
}
12
`;
13
14
const Beacon = styled.span`
15
animation: ${pulse} 1s ease-in-out infinite;
16
background-color: rgba(255, 27, 14, 0.6);
17
border-radius: 50%;
18
display: inline-block;
19
height: 3rem;
20
width: 3rem;
21
`;
22
23
export () => (
24
<div>
25
<ReactJoyride
26
beaconComponent={BeaconComponent}
27
// beaconComponent={BeaconComponent as React.ElementType<BeaconRenderProps>} for TS
28
...
29
/>
30
</div>
31
);
Copied!
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
1
const Tooltip = ({
2
continuous,
3
index,
4
step,
5
backProps,
6
closeProps,
7
primaryProps,
8
tooltipProps,
9
}) => (
10
<TooltipBody {...tooltipProps}>
11
{step.title && <TooltipTitle>{step.title}</TooltipTitle>}
12
<TooltipContent>{step.content}</TooltipContent>
13
<TooltipFooter>
14
{index > 0 && (
15
<Button {...backProps}>
16
<FormattedMessage id="back" />
17
</Button>
18
)}
19
{continuous && (
20
<Button {...primaryProps}>
21
<FormattedMessage id="next" />
22
</Button>
23
)}
24
{!continuous && (
25
<Button {...closeProps}>
26
<FormattedMessage id="close" />
27
</Button>
28
)}
29
</TooltipFooter>
30
</TooltipBody>
31
);
32
33
export () => (
34
<div>
35
<ReactJoyride
36
tooltipComponent={Tooltip}
37
...
38
/>
39
</div>
40
);
Copied!
Last modified 1mo ago