React joyride - closing tour leads to the next step instead

user_6945866 0
Viewed 1058

Im having issues with closing the tour. Clicking on the "Skip tour" leads to the next step... Why? Why it doesnt close the tooltip?

Sample:

const App = () => {
  const steps = [];

  return (
    <div>
      <div style={{ background: 'yellow' }} className={'a'}>
        hey
      </div>
      <div style={{ background: 'green' }} className={'b'}>
        hey
      </div>
      <div style={{ background: 'red' }} className={'c'}>
        hey
      </div>
      <Joyride steps={steps} tooltipComponent={CustomTooltip} />
    </div>
  );
};

const CustomTooltip = ({
  index,
  size,
  step,
  closeProps,
  primaryProps,
  tooltipProps,
  isLastStep,
}) => (
  <div {...tooltipProps} style={{ background: 'blue', padding: '20px' }}>
    <button {...closeProps}>Skip Tour</button>
    <button {...primaryProps}>{isLastStep ? 'Close' : 'Next'}</button>
  </div>
);

Playground: https://codesandbox.io/s/boring-carson-fmrfo?file=/src/index.tsx

Docs: https://docs.react-joyride.com/custom-components

reactjs javascript
1 Answers

What you need is skipProps not closeProps. Replace both instances of the variable and you should be good.

import React from "react";
import ReactDOM from "react-dom";
import "react-app-polyfill/ie11";
import "core-js/stable";
import "regenerator-runtime/runtime";
import "polyfill-array-includes";
import Joyride from "react-joyride";

const CustomTooltip = ({
  index,
  size,
  step,
  skipProps,
  primaryProps,
  tooltipProps,
  isLastStep
}) => (
  <div {...tooltipProps} style={{ background: "blue", padding: "20px" }}>
    <button {...skipProps}>Skip Tour</button>
    <button {...primaryProps}>{isLastStep ? "Close" : "Next"}</button>
  </div>
);

const App = () => {
  const steps = [
    {
      target: ".a",
      title: "",
      content: "a",
      placement: "bottom-start",
      disableBeacon: true
    },
    {
      target: ".b",
      title: "",
      content: "b",
      placement: "bottom-start",
      disableBeacon: true
    },
    {
      target: ".c",
      title: "",
      content: "c",
      placement: "bottom-start",
      disableBeacon: true
    }
  ];

  return (
    <div>
      <div style={{ background: "yellow" }} className={"a"}>
        hey
      </div>
      <div style={{ background: "green" }} className={"b"}>
        hey
      </div>
      <div style={{ background: "red" }} className={"c"}>
        hey
      </div>
      <Joyride steps={steps} tooltipComponent={CustomTooltip} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

https://codesandbox.io/s/compassionate-gagarin-3skx6?file=/src/index.tsx

user_25702420
Related