SubFormik - Nested reusable forms for Formik

Demo

Rationale

Vanilla Formik stores the form's state as a unique object. When the form's state is highly structured, it gets hard to maintain nested states, because fields must access their own little state from the absolute root e.g. <Field name="user[3].books[2].title" />. In addition, it makes it tedious to create reusable forms.

SubFormik brings the simplicity, flexibility and reusability of having subforms which only have to care about their own state and validation.

Setup

npm i subformik

In vanilla Formik, you would have something like that:

<Formik validateSchema={completeFormSchema}>
  <Form>
    <Field name="city" />
    <Field name="user[3].age" />
  </Form>
</Formik>

With SubFormik, just replace <Formik> by <SubFormikRoot>:

<SubFormikRoot validateSchema={rootValueSchema}>
  <Form>
    <Field name="city" />
    <SubFormik path="user[3]" validateSchema={userSchema}>
      <Field name="age" />
    </SubFormik>
  </Form>
</SubFormikRoot>

You can see that <Field name="age" /> is local to its closest SubFormik context.

<SubFormik /> creates a nested <Formik /> context under the hood. You can then use useFormikContext() exactly the same way you would do with vanilla Formik.

A more complete working demo is available here: Demo.

Validation and error management

All provided validation functions and schemas are run and the results are aggregated into a global error object:

const { errors } = useFormikContext() // done at the root level
{
  city: "City must be longer than 1 character",
  'user[3].age': 'Age cannot be negative',
}

Then re-dispatched to the subforms:

const { errors } = useFormikContext() // done at the `user` subform level
{
  age: 'Age cannot be negative',
}

This design allows you to make each subform only care about its own state, its own validation strategy, and its own errors.

Roadmap

• I dont like the name of <SubFormikRoot />. If you have a suggestion, feel free to propose.

Beside that, nothing specific for now.

It is very possible that a feature available with vanilla Formik is currently not with SubFormik. If you think such feature can benefit everybody, feel free to ask for it, or propose a PR.