Callback

You can get Joyride's state changes using the callback prop. It will receive an object with the current state.

Example data

{
  action: 'start',
  controlled: true,
  index: 0,
  lifecycle: 'init',
  origin: null,
  size: 4,
  status: 'running',
  step: { /* the current step */ },
  type: 'tour:start'
}

{
  action: 'update',
  controlled: true,
  index: 0,
  lifecycle: 'beacon',
  origin: null,
  size: 4,
  status: 'running',
  step: { /* the current step */ },
  type: 'beacon'
}

{
  action: 'next',
  controlled: true,
  index: 0,
  lifecycle: 'complete',
  origin: null,
  size: 4,
  status: 'running',
  step: { /* the current step */ },
  type: 'step:after'
}

Usage

import React, { useState } from 'react';
import Joyride, { ACTIONS, EVENTS, ORIGIN, STATUS, CallBackProps } from 'react-joyride';

const steps = [
  {
    target: '.my-first-step',
    content: 'This is my awesome feature!',
  },
];

export default function App() {
  const [run, setRun] = useState(false);
  const [stepIndex, setStepIndex] = useState(0);

  const handleJoyrideCallback = (data: CallBackProps) => {
    const { action, index, origin, status, type } = data;

    if (action === ACTIONS.CLOSE && origin === ORIGIN.KEYBOARD) {
      // do something
    }

    if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
      // Update state to advance the tour
      setStepIndex(index + (action === ACTIONS.PREV ? -1 : 1));
    } else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      // You need to set our running state to false, so we can restart if we click start again.
      setRun(false);
    }

    console.groupCollapsed(type);
    console.log(data); //eslint-disable-line no-console
    console.groupEnd();
  };

  const handleClickStart = () => {
    setRun(true);
  };

  return (
    <div>
      <Joyride callback={handleJoyrideCallback} run={run} stepIndex={stepIndex} steps={steps} />
      <button onClick={handleClickStart}>Start</button>
      // Your code here...
    </div>
  );
}

You can read more about the constants here