I have one component called Tour.js which is overall rendering tour of the application.
Now I have 3 default buttons which are Next, Skip and Back (If I am not on first popup tour). I want to add one button in footer with title Don’t show again. By clicking on that I want to call function.
<>
<Joyride
callback={this.handleJoyrideCallback}
continuous={true}
run={run}
disableOverlayClose={true}
showProgress={true}
showSkipButton={true}
scrollOffset={50}
steps={[...listItemstemp, ...listItems]}
styles={{
options: {
zIndex: 9999
}
}}
/>
</>
and my list items are
let listItemstemp = [
{
content: <div className="gcontrol-ture">
<img src={one} />
<div className="gcontrol-ture-inner">
<h1>
{t("t_tour.t_common.t_welcome.t_heading")}
<strong>{t("t_tour.t_common.t_welcome.t_heading1")}</strong>
</h1>
<p>{t("t_tour.t_common.t_welcome.t_content")} </p>
<p>{t("t_tour.t_common.t_welcome.t_content1")} </p>
</div>
</div>,
locale: {
skip: <strong aria-label="skip">{t("t_tour.t_common.t_skip")}</strong>,
next: <strong aria-label="skip">{t("t_tour.t_common.t_next")}</strong>,
back: <strong aria-label="skip">{t("t_tour.t_common.t_back")}</strong>,
},
placement: "center",
target: "body",
disableBeacon: true,
styles: {
options: {
width: 650,
padding: "0px"
}
}
}
]