Options are not working in intro-react.js

[saisubrahmanyamlanka]

Describe the bug

Hi,

i want to change the default name of the Next label and customize the existing options. however it didn't work for me
My sample code was

<Hints enabled={hintsEnabled} hints={hints} options={{nextLabel: 'd'}} />

do we need to import any other JS files/libraries? can someone please help me on it?

To Reproduce

import React, { Component } from "react";
import { render } from "react-dom";
import { Steps, Hints } from "intro.js-react";
import "intro.js/introjs.css";
import "./index.css";

export default class App extends Component {
options: { nextLabel: "kk" };
constructor(props) {
super(props);

this.state = {
  stepsEnabled: true,
  initialStep: 0,
  
  steps: [
    {},
    {
      element: ".hello",
      intro: "Hello step"
    },
    {
      element: ".world",
      intro: "World step"
    }
  ],
  hintsEnabled: true,
  hints: [
    {
      element: ".hello",
      hint: "Hello hint",
      hintPosition: "middle-right"
    }
  ]      
};

}

render() {
const {
stepsEnabled,
steps,
initialStep,
hintsEnabled,
hints,
options
} = this.state;
console.log(options);
return (

<Hints enabled={hintsEnabled} hints={hints} options={{nextLabel: 'd'}} />

    <div className="controls">
      <div>
        <button onClick={this.toggleSteps}>Toggle Steps</button>
        <button onClick={this.addStep}>Add Step</button>
      </div>
      <div>
        <button onClick={this.toggleHints}>Toggle Hints</button>
        <button onClick={this.addHint}>Add Hint</button>
      </div>
    </div>

    <h1 className="hello">Hello,</h1>
    <hr />
    <h1 className="world">World!</h1>
    <hr />
    <h1 className="alive">It's alive!</h1>
  </div>
);

}

onExit = () => {
this.setState(() => ({ stepsEnabled: false }));
};

toggleSteps = () => {
this.setState(prevState => ({ stepsEnabled: !prevState.stepsEnabled }));
};

addStep = () => {
const newStep = {
element: ".alive",
intro: "Alive step"
};

this.setState(prevState => ({ steps: [...prevState.steps, newStep] }));

};

toggleHints = () => {
this.setState(prevState => ({ hintsEnabled: !prevState.hintsEnabled }));
};
addHint = () => {
const newHint = {
element: ".alive",
hint: "Alive hint",
hintPosition: "middle-right"
};

this.setState(prevState => ({ hints: [...prevState.hints, newHint] }));

};
}

render(, document.getElementById("root"));

Expected behavior

i want to change the existing name of options those are nextlabel, prevlabel, skiplabel, etc...

How often does this bug happen?

Every time

System Info

No response

Additional Context

No response

[HiDeoo]

Hi,

The hint options are slightly different from the step ones and are documented here.

In order to customize the hint button label, you have to use the hintButtonLabel option, e.g. <Hints enabled hints={hints} options={{ hintButtonLabel: "Custom hint button label" }} />.

You can find a working example in this codesandbox.