score:2

Accepted answer

the material-ui stepper component was not adjusting to my needs and it was becoming an obstacle. so i created my own stepper component.

i did a quick research and found this simple stepper by vicente lyrio and made my custom component from that code. here's my result: stepper with progress bars by jhonatan zuluaga you can add as many steps as you want to and it's going to work. here's the component:

 function customstepper(props) {
  const { steps, current, progress, classes } = props;
  
  function stepcontent({ done, index }) {
    return done ? "✓" : index + 1;
  }

  const progressbar = ({ current, step, progress }) => {
    let value = 0;
    if(current+1 === step) {
      value = progress
    } else if(current >= step) {
      value = 100
    }
     
    return <linearprogress variant="determinate" value={value} classes={{root: classes.linearprogress, bar: classes.bar}} />
  }
  
  function renderstep(label, key) {
    const { current, progress } = this;
    const done = key < current;
    const currentstep = key === current;
    const stepclasses = classnames({
      [classes.stepper__step__index]: true,
      [classes.currentstep]: currentstep,
      [classes.done]: done
    });
  
    return (
      <li classname={classes.stepper__step} key={key}>
        <div classname={classes.labelcontainer}>
          <span classname={stepclasses}>
              <stepcontent done={done} index={key} />
          </span>
          <p classname={classes.stepper__step__label}>{label}</p>
        </div>
        {!!key && <progressbar current={current} step={key} progress={progress} />}
      </li>
    )
  }

  return (
    <ul classname={classes.stepper}>
      {steps.map(renderstep, { current, progress })}
    </ul>
  )
}

Related Query

More Query from same tag