jibbedi / react-wizard-primitive Goto Github PK

Thank you for this library!
Would it possible to add an option to skip onChange handler when calling goToStep?
In my case, I push a new state to the browser's session history stack (see history) thank to the onChange handler. I don't use hash routing so I can't use the built-in routing.
I have also a listener to popstate event that updates current step (by calling goToStep) when the user clicks on back button for example. In this case, I would like to skip the onChange handler. Otherwise it pushes a new state and breaks the navigation.

Example:

  const { activeStepIndex, getStep, goToStep, nextStep, previousStep } = useWizard({
      onChange: ({ newStepIndex }) => {
        history.push("/step" + newStepIndex);
      }
  });

  useEffect(() => {
    const handlePopState = event => {
      // retrieve step index from path
      const newStepIndex = ...;
      if (newStepIndex !== -1) {
        // actually
        goToStep(newStepIndex);
        // expected
        goToStep(newStepIndex, { skipOnChange: true });
      }
    };

    window.addEventListener("popstate", handlePopState);

    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  });

Hey,

This is a question about a possible first-time contribution.

I found several small improvements that could be applied to README.md file (typos, duplicated lines).

Can I go ahead & submit a pull request? Is there anything I should do before?

Is there any possibility to disable the router? thanks

@all-contributors please add @Jibbedi for code

I think the hasBeenActive should be false in the first render to the first element, if you want to know if is active you can use isActive

for me hasBeenActive active is when you has pass that level

Hi,
Thanks for great work with the wizard. I just began using it on a new react project and it works good.
I'm having one issue though. I have two pages setup with routing. When I go to another page and come back to my page with the wizard steps, it won't render the step content.

Check out this code example that reproduces the issue:
https://codesandbox.io/s/react-wizard-d33qy

Note that I have put the Wizard inside index.js, this is so that I have access to the context from everywhere. When I put the Wizard inside my actual wizard component then it works fine.

Perhaps I'm doing it wrong (after all I'm new to react) ?

First of all, great lib, very useful! Would it possible to include an initialStepIndex property where the wizard initially starts? In our use case we store the current step locally. In case the user refreshes the page, the wizard starts from its last index. Currently, we use goToStep to achieve this once the wizard is loaded, but it results in a noticeable glitch on slow devices.

I should mention that routing is not an option for us since we don't want the user to mess around with the wizards state.

When a WizardStep is used in a nested component, and that component rerenders,
getStep will be called again, which creates a new step, making the nested component one inactive.

Hello,

I gave routeTitle a try to persist the current step in the url to allow reloading the wizard without losing the state. It works really neat!

But.

When navigating to one of the next steps and reloading the browser window, you can notice a flicker while rendering the first step and immediately jumping to the currently active step (determined by the URL hash).

Here's a codesandbox with the replicated behaviour: https://codesandbox.io/s/wizard-custom-abstraction-forked-vx7y2

Is there a way to fix this?

Thanks a lot!

When using <React.StrictMode> the step doesn't get renderes initially. Only if the previous/next buttons are clicked the steps appear.

I added it to one of your examples. Take a look:
https://codesandbox.io/s/basic-render-props-example-forked-g8rez?file=/src/index.js

This does not render the steps

const FirstStep = () => {
  const { isActive } = useWizardStep()
  return isActive && <div>First Step</div>
}

const SecondStep = () => {
  const { isActive } = useWizardStep()
  return isActive && <div>Second Step</div>
}

const App = () => {
  return (
    <Wizard>
      <FirstStep />
      <SecondStep />
    </Wizard>
  )
}

This does work

const FirstStep = () => {
  return (
    <WizadStep>
        {({ isActive }) => isActive && <div>First Step</div>
    </WizardStep>
  )
}

const SecondStep = () => {
  return (
    <WizardStep>
      {({ isActive }) => isActive && <div>Second Step</div>
    </WizardStep>
  )
}

const App = () => {
  return (
    <Wizard>
        <FirstStep />
        <SecondStep />
    </Wizard>
  )
}

Add a property to the step state, that is true when step is active and / or hasBeenActive.

Hello and thank you very much for creating this interesting piece of software.
I have a question regarding the usage of react-wizard-primitive.

Like in other wizards I would like to preserve the state of the components/steps that are currently not visible so that:

1. The user can later go back to other steps and change the input
2. I can access the states of all previous components in a final step (e.g. to send a form)

However I noticed when trying out your example that the state will be reset whenever I go back to a previous component. To try this out I forked that example and added a state to the TextFields component.
https://codesandbox.io/s/wizard-custom-abstraction-forked-5wr9c

I might have a big misconception here but I expected the wizard to never actually unrender the various steps but just make them "invisible" so that the components would keep their state (like https://github.com/newbreedofgeek/react-stepzilla does it as far as I understand).

Or would it be necessary for me manage all the states of the steps in the parent (Wizard) component?
If this was the case how would you go about creating a custom wizard (like in your example https://codesandbox.io/s/wwo9x7p1k) that is generic so that it would accept any components as children?
Because managing the state would imply knowing what states the components require.

Thank you very much in advance and please let me know if you need any other information for further clarification.