Create a responsive Stepper component - React

[fabianstarke]

Hi I am currently building a reusable stepper and I got a bit stuck with finding the logic.
I need to create a reusable component using React as tech. The component should take some props like an array of objects with every item holding some information.

Depending on the screen size, some steps should hide, depending on the total number of steps available, current step, steps to go and steps done. Its not only about hiding some steps, but also regrouping previous or next steps depending on current index.

If someone is interested helping i can share some code of what I did, and maybe could try explain what main info i should get and how to construct my component.

Thanks

[kevinSmith]

It’s funny, at my last job I had to create a stepper component, actually two versions of it. It was React Native, but same idea.

You could show us what you have so far and we could help.

[fabianstarke]

Hi Kevin, great you already faced this, In fact I am not sure how to write my conditions.
Code looks like that

       <Wrapper ref={this.container}>
        <NavBar>
          {this.getSetInfo}
          {steps.map((step, index) => (
            <Step
              id={`step-${index}`}
              ref={(ref) => (this.steps[index] = ref)}
              key={index}
            >
              <Circle
                className={` ${
                  step.active ? "current" : step.done ? "done" : ""
                }`}
                onClick={(e) => this.handleNavClick(e, step.title)}
              >
                <Index
                  className={`${
                    step.active ? "current" : step.done ? "done" : ""
                  } ${
                    wrap && currentIndex > index && index != 0
                      ? step.previousText
                      : wrap && currentIndex < index
                      ? "next"
                      : ""
                  }`}
                >
                  {step.done && index !== currentIndex && !wrap ? (
                    <img src={CheckValid} alt="" />
                  ) : wrap &&
                    index != 0 &&
                    index != steps.length - 1 &&
                    index != currentIndex ? (
                    "..."
                  ) : (
                    navItems.indexOf(step.title) + 1
                  )}
                </Index>
                <Title>
                  {step.title}
                </Title>
              </Circle>
              {navItems.indexOf(step.title) !== navItems.length - 1 ? (
                <Bar
                  id={`bar-${index}`}
                  className={`${
                    step.active ? "current" : step.done ? "done" : ""
                  }  
                  ${wrap ? "small" : ""}`}
                />
              ) : (
                ""
              )}
            </Step>
          ))}
        </NavBar>
      </Wrapper>

[fabianstarke]

I just want to loop on the steps and depending on some conditions show them or not (this will only apply for small screens)

every Item is an object, where I am holding some information like how many steps to right, to left, if step is active and done

{
active: false
done: false
stepsLeft: 3
stepsRight: 3
title: "Descriptions"
}

For example

Condition 1:

If no previous step to current step ?

• show current step
• show 2 next steps
• hide all other steps
• keep last step always displayed

Condition 2

If there is 1 previous step ?

• Show current step
• Show the next step
• hide other steps and instead show a step called Other steps regrouping them all
• Show last step

and so on, there are max 5 steps to show. but handling this seems a bit unflexible not sure how to do that.

And the Ui is like

[kevinSmith]

It might be easier with a repo so I can try things out, but just looking it over, I would be thinking about doing something like this…

You have steps.map..., I would think about doing a step before that, with a filter method or something else, to remove the unwanted steps and then map those. For readability, I would do that before the return statement. (And in general, I would extract most - if not all - of that logic and helper functions from the JSX - but that get’s into stylistic approaches.

[fabianstarke]

Thanks for your reply, i added the example on a repo so you can have a look.

Fabian Starke / Stepper

Let me know if you have some clues for me would be great.

Best
Fabian