Help me re-write react-step-builder for a better developer experience

[sametweb]

Hello,

I would like to re-write the react-step-builder library. There are some things about the library explained below that I am not really happy with. Please share your thoughts and help me build something great.

State management

When I designed version 2, I wanted to have a global state that holds the value of all the form elements, which live in Steps component. I am starting to regret this decision as it makes it harder for developers to integrate this library with an existing project.

My current thought process is that the library should not force a specific state management solution. The user should hold their state wherever they'd like. The solution I provided in this library did not bring anything new to the state management concept anyways.

Passing step components as props vs. utilizing props.children

Another issue that's been bugging me is the way the user needs to create their step components. When you create a form that needs to be divided into multiple steps, it might be burdensome to maintain different components in different files that share and manipulate the same global state.

My solution to this is to utilize props.children and make Step components to accept children components. That way the developer can decide whether to keep the steps in different files or simply write the entire form in one single file and wrap each step with Step component tags. Composition over Inheritance discussion in React Docs opened my eyes to this method.

This solution will also help greatly with the 'opinionated global state' problem I expressed earlier.

Navigation component

The Navigation component needs to receive its state somehow. The most basic solution is passing it via props. Another solution is creating a custom hook that serves the state of the Steps component.

If passed via props, the developer needs to create the component in a separate file.

Or render props can be utilized, but that's the last thing I want to force people if they want to keep their Navigation component inside the form.

I need some brainstorming on this issue in order to come up with an elegant solution that is easy to use, yet serves well.

Please share your ideas and help me consolidate these thoughts. I am planning to re-write the entire library with the abovementioned updates. These are going to be major breaking changes with version number 3.

Looking forward to hearing ideas.