Callback

React Joyride
Overview
Search…
Overview
Callback
You can get Joyride's state changes using the callback prop.
It will receive an object with the current state.
Example data
1
{
2
  action: 'start',
3
  controlled: true,
4
  index: 0,
5
  lifecycle: 'init',
6
  size: 4,
7
  status: 'running',
8
  step: { the.current.step },
9
  type: 'tour:start',
10
}
Copied!
1
{
2
  action: 'update',
3
  controlled: true,
4
  index: 0,
5
  lifecycle: 'beacon',
6
  size: 4,
7
  status: 'running',
8
  step: { the.current.step },
9
  type: 'beacon',
10
}
Copied!
1
{
2
  action: 'next',
3
  controlled: true,
4
  index: 0,
5
  lifecycle: 'complete',
6
  size: 4,
7
  status: 'running',
8
  step: { the.current.step },
9
  type: 'step:after',
10
}
Copied!
Usage
1
import Joyride, { ACTIONS, EVENTS, STATUS } from 'react-joyride';
2
​
3
export class App extends React.Component {
4
  state = {
5
    run: false,
6
      steps: [
7
      {
8
        target: '.my-first-step',
9
        content: 'This is my awesome feature!',
10
      },
11
    ],
12
    stepIndex: 0, // a controlled tour
13
  };
14
​
15
  handleJoyrideCallback = data => {
16
    const { action, index, status, type } = data;
17
​
18
    if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
19
      // Update state to advance the tour
20
      this.setState({ stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) });
21
    }
22
    else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
23
      // Need to set our running state to false, so we can restart if we click start again.
24
      this.setState({ run: false });
25
    }
26
​
27
    console.groupCollapsed(type);
28
    console.log(data); //eslint-disable-line no-console
29
    console.groupEnd();
30
  };
31
​
32
  render () {
33
    const { run, stepIndex, steps } = this.state;
34
​
35
    return (
36
      <div className="app">
37
        <Joyride
38
          callback={this.handleJoyrideCallback}
39
          run={run}
40
          stepIndex={stepIndex}
41
          steps={steps}
42
          ...
43
        />
44
        ...
45
      </div>
46
    );
47
  }
48
}
Copied!
You can read more about the constants here​
Custom Components
Constants
Last modified 12d ago
Copy link
Contents
Example data
Usage