Custom Components

React Joyride
Overview
Search…
Overview
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
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!
Styling
Callback
Last modified 12d ago
Copy link
Contents
beaconComponent
Props
Example with styled-components
tooltipComponent
Props
Example with styled-components