import Joyride, { ACTIONS, EVENTS, STATUS } from 'react-joyride';
export class App extends React.Component {
target: '.my-first-step',
content: 'This is my awesome feature!',
stepIndex: 0, // a controlled tour
handleJoyrideCallback = data => {
const { action, index, status, type } = data;
if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
// Update state to advance the tour
this.setState({ stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) });
else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
// Need to set our running state to false, so we can restart if we click start again.
this.setState({ run: false });
console.groupCollapsed(type);
console.log(data); //eslint-disable-line no-console
const { run, stepIndex, steps } = this.state;
callback={this.handleJoyrideCallback}