Version 3

[sametweb]

This version is a major upgrade that removes some parts of the library and introduces some breaking changes.

1. Global state management is removed. You are responsible for your own state management now.
2. Step component is removed. Direct siblings of Steps component will be treated as a new step.
3. StepsProvider should wrap the component that renders Steps component. For example, if Steps component is rendered in App component, and App is rendered in index.js file, <App/> should be wrapped with StepsProvider in index.js file.
4. Methods and properties such as next, prev, isFirst, isLast should be accessed using useSteps hook.

For more details, please check the documentation.

---

This discussion was created from the release Version 3.

[coltanium13]

Did the config prop go away? If so, would the navigation stuff (component, and location) just be hand rolled rather than configured by the wrapper?

Also, is there documentation on the props? (config, etc)

I had something like this before:

const stepsConfig = {
        navigation: {
            // you can add extra custom props into StepNavigation. Just update the interface too
            component: (navProps: NavigationComponentProps) => (
                <StepNavigation
                    {...navProps}
                    isSaving={props.isSavingChanges}
                    validateForm={props.validateForm}
                    submitAccount={props.submitAccount}
                    addressWasUpdated={props.addressWasUpdated}
                    setAddressWasUpdated={props.setAddressWasUpdated}
                />
            ),
            location: 'after',
        } as NavigationConfig,
        before: (progressProps: NavigationComponentProps) => (
            <ProgressWrapper {...progressProps} name={name} claimNumber={props.claimNumber} />
        ),
    } as StepsConfig;

return <Steps config={stepsConfig}>{uniq(steps).map((step) => step)}</Steps>;

I am glad you are still working on this. Thank you for all your hard work!

[sametweb]

Hello @coltanium13, thank you for using the library and giving feedback. I really appreciate it.

Did the config prop go away? If so, would the navigation stuff (component, and location) just be hand rolled rather than configured by the wrapper?

Yes, config prop is not a thing anymore. Thanks to the power of composition, you can place your Navigation anywhere in your code. Just pull the methods you need (next, prev, etc.) from useSteps hook. Make sure you don't place them inside <Steps></Steps> though, otherwise it will be treated as a new step. Every direct sibling of Steps is a step now.

Also, is there documentation on the props? (config, etc)

Steps only accepts onStepChange prop that is a function that runs on every time user navigates between steps. I included it in the documentation last night actually. If you need anything else, let me know and I implement them since I am dealing with the library these days.

In your current code, instead of passing config object, you can directly render them inside return statement. Just make sure that if you are using any property that exists in NavigationComponentProps and not in the that is returned by useSteps, modify accordingly. I didn't delete anything major other than the state handling methods. Unfortunately new version does not provide the global state anymore.

Here I quickly refactored the code you shared:

const stepsConfig = useSteps();

return (
  <>
    <Steps>
      {uniq(steps).map((step) => step)}
    </Steps>
    <StepNavigation
      {...stepsConfig} // make sure renamed and removed properties are not used in StepNavigation component
      isSaving={props.isSavingChanges}
      validateForm={props.validateForm}
      submitAccount={props.submitAccount}
      addressWasUpdated={props.addressWasUpdated}
      setAddressWasUpdated={props.setAddressWasUpdated}
    />
  </>
);

One last thing, make sure you wrap this component with StepsProvider, wherever it's rendered. Say this is App.tsx, go to index.tsx file and do this: <StepsProvider><App /></StepsProvider

[coltanium13]

Thank you so much for your detailed reply! once my team updates to the latest version, ill let you know how it goes. I think it will greatly simplify implementation using the hook.

Side note, you might want to update your codesandbox example to say v3. (it currently still says v2 in the h1)

[sametweb]

Missed that one 😅 thanks!

[coltanium13]

Is the App.tsx, and style.css (or styles.css) in your master branch, not the same as your codesandbox example? are those off of 2 different branches? It looks like your App.tsx in the master branch is still talking about v2 stuff, and the style sheet is not the same.

I tried to fork off your master branch into a codesandbox to play with it, but it did not look like your v3 code sandbox until i changed the App.tsx, and style sheet over to what your codesandbox had.