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!
Last modified 1mo ago
Copy link