zaguiini / formik-wizard Goto Github PK

Hi, I'd like to have a full example of use case in React Native. Thks

Formik needs to enable re-initialize
Example:
<Formik
enableReinitialize // missing piece!!
initialValues={props.initialValues}

@zaguiini I want to reset the form on submit. I use setValues from useFormikWizard, but now that data persists even upon submitting my form. How do I clear my values for the next use of the wizard?

const { values: wizardValues } = useFormikWizard();
const [tableData, setTableData] = useState(wizardValues.lineItems.data != null ? wizardValues.lineItems.data : [] );

Specifically doing something like this persists, even after submit. The next time I open the wizard, tableData is populated with my old lineitems data.

Hi,

Is it possible to give state from my MultiForm to Formwrapper?

`function MultiForm(props) {
console.log(props)
const handleSubmit = React.useCallback(values => {
console.log("full values:", values)

return {
  message: "Thanks for submitting!",
}

}, [])

return (

)
}

export default MultiForm`

As you can see this is the MultiForm component, and I want to pass some state to my FormWrapper to render the correct button.

`function FormWrapper({
children,
isLastStep,
status,
goToPreviousStep,
canGoBack,
actionLabel,
type,
}) {
console.log(type)
return (

        {type === "betalen" ? (
          <StyledButton
            type="submit"
            className="w-1/3 md:w-1/5 mx-4 rounded-sm"
          >
            {actionLabel || (isLastStep ? "Betaal nu" : "Volgende")}
          </StyledButton>
        ) : (
          <StyledButton
            type="submit"
            className="w-1/3 md:w-1/5 mx-4 rounded-sm"
          >
            {actionLabel || (isLastStep ? "Verzend PDF" : "Volgende")}
          </StyledButton>
        )}
      </div>
    </>
  )}
</div>

Getting below error with your example. How do I resolve it?

./src/views/CompanyInfo.js
Attempted import error: 'useFormikContext' is not exported from 'formik'.

setImmediate is deprecated and it may work fine with some tools like CRA, but it does not work out of the box with nextjs. So anyone who is using this library with build tools have to polyfill it. Seem like this call may not be wrapped in setImmediate.

     setImmediate(wizard.next)

https://github.com/zaguiini/formik-wizard/blob/master/src/index.tsx#L82
Please, correct me if I'm wrong and there is a reason for using setImmediate. Otherwise it may be removed and this will help people who are not able to use this library out of the box.

Back in 2019, when I first started working on this library, it made sense to base its scope solely on formik and react-albus, which were arguably the best two libraries in their segment and covered most use cases.

Fast forward to 2020, I'm not sure if this statement holds true and people are using different form libraries (like react-final-form) and wizard libraries (using react-step-wizard) as examples.

Limiting this library to formik and react-albus could be a show stopper for people that are not actually using them. Ideally, the library should be adaptable to whatever solution the target developer likes.

I've started implementing something, but due to lack of availability I'm unable to complete this POC/MVP, but here is the repository. There's also an example usage, if you want to check how to use the new project.

I really think this could go forward and, ideally, we could expose a generic adapter for forms and wizard libraries (or components) so it become as flexible as it could be.

Feel free to contribute and give your two cents there (and here too). I'm pinning this issue and referencing it on the repository for further reference.

From the DevTools' Console tab

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Steps, Wizard

Is there a way I can get access to the values up to a certain step?

Say I have 4 steps: A, B, C, and D.

A has 2 values (name and age)
B has 2 value (companyName and designation)
C has 3 value (street, zipcode and country)
D is the final step

I want to gain access to the values before step C that is (name, age, companyName, designation) at C. Is there any way I can get that?

Currently, the scenario I have is like this. Say I have 4 steps: A, B, C, and D And 4 buttons namely, Step A, Step B, Step C, and Step D.

I have completed till step B and currently, I am at step C but I want to be able to jump to the previous steps with the click of the step buttons (can be either Step A or Step B). But if I want to jump to step D I will be stopped and moved to the uncompleted step C.

I have looked into the push method from the wizard props in the FormWrapper but the push method puts me in any step I click.

Is there a way to do this?

Here is a codesandbox of the problem.

How do I use, setSubmitting, setStatus etc. in handleSubmit function?

I would like to set the submit button's text to "submitting".

My form success message doesn't show if I put the return function inside a setTimeout (trying to simulate data being sent to a server)

import { useFormikContext } from 'formik'

const handleSubmit = useCallback(values => {
  setSubmitting(true)
  setTimeout(() => {
    setSubmitting(false)
    return {
      message: "success"
    }
  }, 5000) 
}, [])

Hi,
I was trying to use this in my project but I am stuck on 2 things.

1. I am not able to go to a particular step. it always starts from the beginning. Please do let me know if any solution for that.

2. onAction call if any error in API response how to handle that.

Hi all,

Could you please have a look at this?
Warning: The component appears to be a function component that returns a class instance. Change Step to a class that extends React.Component instead. If you can't use a class try assigning the prototype on the function as a workaround. Step.prototype = React.Component.prototype. Don't use an arrow function since it cannot be called with new by React.

Kind Regards,
Brecht

I have a wizard working just like the example, and I'm trying to find out how to set a loading variable that can be read inside the form views. The idea is to pass a "isLoading" flag to the form, so I can animate the field background and set disable to true.

I'm making my server calls at the index file (the one that instantiates FormikWizard and passes the options to it. Any ideas would be awesome!

If so, how?

see line https://github.com/zaguiini/formik-wizard/blob/master/src/index.tsx#L111

if we remove Form then submit hook will never be called..

I've been able to use formik-wizard to build that, a wizard with validation succesfully, but i want my form to have some fields that are depended on others. For example, if you say "no" you might not need to answer more questions, but if you say "yes" you need to fill some more fields. How can i update my validationSchema to ignore those hidden/non-rendered fields?

I'm using formik-wizard with React Native and Typescript. I use useFormikContext() to access the values from inside each step, but the problem is the values are only limited to those of that particular step. How do I access the entire form values?

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Copy/pasted your example.

Hey, please update the library to be up to date with the latest react version.

index.js:1 Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: Steps, Wizard

Learn more about this warning here: https://fb.me/react-legacy-context

Hi @zaguiini

Jared palmer's tsdx don't handle default exports very well.

To be able to use FormikWizard, I need to use the prop default from the default imported module:

import FormikWizard from 'formik-wizard';
...
<FormikWizard.default ... />

What do you think about using only named exports?

https://jaredpalmer.com/formik/docs/migrating-v2#deprecation-warnings

@zaguiini react native has no type="submit" , so how do i got to next step? after clicking the button. Unable to find any albus examples too for submitting.

I'm having difficulties displaying the current step count with the total number of steps.

It says Step 1 of 1 for each form page when there are 3 total steps so far. It should say Step 1 of 3, Step 2 of 3, etc... Any help is appreciated.

function FormWrapper({ children, isLastStep, status, goToPreviousStep, canGoBack, actionLabel }) {
  const [stepNumber, setStepNumber] = useState(0);
  const steps = Children.toArray(children);

  const step = steps[stepNumber];
  const totalSteps = steps.length;

  return (
    <>
      <p>
        Step {stepNumber + 1} of {totalSteps}
      </p>
      {status && (
        <div>
          {status.message}
          <hr />
        </div>
      )}
      {children}
      <Row>
        <Col lg={{ span: 9, offset: 3 }} className='onboard__actions'>
          <button
            type='button'
            onClick={goToPreviousStep}
            disabled={!canGoBack}
            className='onboard_btn onboard_btn-secondary'
          >
            Previous
          </button>
          <button type='submit' className='onboard_btn onboard_btn-primary'>
            {actionLabel || (isLastStep ? 'Submit' : 'Next step')}
          </button>
        </Col>
      </Row>
    </>
  );
}