A multi-step form component powered by formik and react-albus.

Large forms are generally bad for User Experience: it becomes both tiresome to fill and, in most of the cases, it gets slow. I've built this lib to tackle this problem: dividing one big form in multiple smaller forms, it gets much easier to reason about, both as a developer and as a user.

All the smaller forms may include validation (powered by yup) and default values.

You can check the demo here, with the corresponding source code here.

You need to have formik and react-albus installed -- they are peer dependencies. After that, just yarn add formik-wizard and you're good to go!

If you plan to validate the sections, you need to install yup as well!

Check out the example source code and the typings. There's a hook called useFormikWizard that you can use to read and write sections values and form statuses. I recommend using immer because you're modifying the steps data directly!

It's pretty straightforward: just use the Form prop component as a children forwarder. Example:

<FormikWizard
  {...props}
  Form={({ children }) => children}
/>

That's needed because there's no form web component on React Native and formik-wizard (and formik) fallbacks to it.

That's a known issue. Jared palmer's tsdx doesn't handle default exports very well. Two options:

import FormikWizard from 'formik-wizard'

function App() {
  return <FormikWizard.default />
}

or...

import { FormikWizard } from 'formik-wizard'

function App() {
  return <FormikWizard />
}

The onSubmit function expects a Promise. Whatever you return from that Promise will be set as the status. For example:

import { useCallback } from 'react'

const handleSubmit = useCallback((values) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        message: "success"
      })
    }, 5000)
  })
}, [])

While that Promise is pending, the isSubmitting flag is set to true. The status is set automatically from the return of that Promise.

The step form is wrapped inside a Formik component but its props aren't propagated to the form component. Anyway, you'll still have access to the Formik context through one of these methods:

• by using the connect HOC.
• by using the Field component with a render prop or a callback function as children.
• by using the useFormikContext hook (available in Formik's v2).

MIT

This project was bootstrapped with TSDX.