Hide or Inactivate Steps

[apurvsamant]

Hi, Firstly thanks a lot for creating the Stepzilla package as it's very useful and helpful. I had a question with regards to controlling the steps:

Can you please let me know if there's a way to control steps? For eg: On selection of a specific value from a dropdown list in Step 1 can make Stpe 2 inactive or hide it

[Naghal]

Hi, here is how I managed to achieve it.

const getSteps = () => {
    return [
      { name: <><FaList /> {t('prp.agreement_details')}</>, component: <AgreementDetails inputProps={inputProps} file={getFile()} paymentIntervals={paymentIntervals} /> },
      ... inputProps('numberOfPayments').value > 1 ? [{ name: <><FaMoneyBillAlt/> {t('prp.employment_info')}</>, component: <EmploymentInfo inputProps={inputProps} cities={cities} states={states} /> }] : [],
      { name: <><FaSearch /> {t('prp.review')}</>, component: <Review inputProps={inputProps} valid={valid} isSubmitting={isSubmitting} file={getFile()} /> },
    ];
  }

 return (
  <div>
    <Stepper steps={getSteps()} dontValidate />
  </div>
  );

[apurvsamant]

Thanks a lot for the reply.