How to Add Custom Button Text for each Step

[digitalbridge]

Is it possible to somehow have different text on buttons on every step rather than the same throughout all steps? Would be great if you could, for example, have 'nextButtonText' value inside the definition of each component.

[newbreedofgeek]

Hi @digitalbridge - I like the idea but at this point in time its not possible, I'll flag this as a UpVotes Needed and if we get many upvotes we may plan it in a release but at this point we dont have have any plans for this.

Horrible workaround would be to use JavaScript to inject custom text into the buttons after page load... (sorry...)

[logankoester]

I've successfully worked around this limitation by passing a component to nextButtonText and setting its state from each step component by reference. It does echo a prop-types warning, but it's working well so for now I can live with that:

class NextButtonText extends Component {
  constructor(props: {}) {
    super(props);
    this.state = { text: 'Continue', }
  }

  render() {
    return(this.state.text);
  }
}

class MySteps extends Component {
  constructor(props: {}) {
    super(props);
    this.setNextButtonText = this.setNextButtonText.bind(this);
    this.state = {
      steps: [
        { name: 'StepOne', component: <StepOne setNextButtonText={ this.setNextButtonText } /> },
        { name: 'StepTwo', component: <StepTwo setNextButtonText={ this.setNextButtonText } /> },
      ]
    };
  }

  setNextButtonText(value) {
    if (this.nextButtonText) {
      this.nextButtonText.setState({ text: value });
    }
  }

  render() {
    return (
        <StepZilla 
          nextButtonText={<NextButtonText ref={(nbt) => { this.nextButtonText = nbt; }} />}
          steps={this.state.steps} />
    );
  }
}

[newbreedofgeek]

@logankoester thats very smart, good job! I'll close this off for now. If someone else has the same request I'll reopen and activate the "Upvotes" tag.

[TonyWu5]

Another approach to this is to utilize the step that gets returned from onStepChange and conditionally change the nextButtonText based on the step.

const MySteps = props => {
  const [nextBtnText, setNextBtnText] = useState('Agree & Continue');

  const onStepChange = step => {
    if (step !== 0) {
      setNextBtnText('Save & Continue');
    } else {
      setNextBtnText('Agree & Continue');
    }
  };

  const steps = [
    {
      name: 'Step 1',
      component: <Step1 />,
    },
    {
      name: 'Step 2',
      component: <Step2 />,
    },
    {
      name: 'Step 3',
      component: <Step3 />,
    }
  ];

  return (
          <StepZilla
            steps={steps}
            nextButtonText={nextBtnText}
            onStepChange={onStepChange}
          />
  );
};