1.7.0

💅 Improvements

• All types are now exported by default

• Updated dependencies

⚠️ Possible breaking changes

• The type ExtendedFormupFormInputData was renamed to InputFormupData

1.6.2

🐛 Bugfixes

• 🐛 #43 Fixed a bug where FormInputGroupItem would not detect the selected item when using objects.

1.6.1

💅 Improvements

• 💅 Updated dependencies

1.6.0

🔥 Support for auto-transform on submit!

Formup now supports auto-transform on submit! You can use any kind of .transform in any schema field, and if you pass transformOnSubmit option to useFormup it will automatically transform your form values according to your schema when you submit your form.

You can check all implementation details here.

Suppose you do have this schema:

const exampleSchema = createSchema({
  uppercaseInput: yup
    .string()
    .required()
    .transform((value) => `${(value || '').toUpperCase()}`)
    .label('Uppercase string'),
});

The transform value in yup works internally, that is, it'll execute the transform between all form validations, but your form values will always be non-transformed:

form.values = {
  uppercaseInput: "foo",
};

If you pass transformOnSubmit to useFormup, when you submit you form this happens:

const onSubmit = (values) => {
  console.log(values.uppercaseInput); // will print "FOO"!
};

1.5.4

🐛 Bugfixes

• 🐛 #43 Fixed a bug where label wasn't being automatically inherited from the schema in array fields when using array inside objects inside arrays.

1.5.3

🐛 Bugfixes

• 🐛 Fixed a bug where label wasn't being automatically inherited from the schema in array fields.

1.5.2

🐛 Bugfixes

• 🐛 Fixed a bug where arrayHelpers wasn't being injected into the child component of FormArrayField.

💅 Improvements

• 💅 New exports! Formup is now exporting the components returned by useFormup:

  • Form
  • FormInput
  • FormArrayField
  • FormInputGroup
  • FormInputGroupItem

This means you don't have to get these components from useFormup - if you want to, you can simply import these components from @formup/core. This helps a lot with prop dependency since you don't need to pass these components as props anymore!

// These are the same:

import { FormInput } from "@formup/core";

// --

import { useFormup } from "@formup/core";

const { FormInput } = useFormup();

1.5.0

🔥 Support for array fields!

Formup now supports array fields! You can check all implementation details here.

Suppose you have an array in your schema, be it a simple array of primitive or string types, or an array of objects.

import * as yup from 'yup';

const familyMemberSchema = yup.object().shape({
  name: yup.string()
    .required()
    .label('Name'),

  email: yup.string()
    .email()
    .label('Email'),
}, locale);

const schema = yup.object().shape({
  // Array of strings
  colors: yup.array()
    .of(
      yup
        .string()
        .required(),
    ),

  // Array of objects
  familyMembers: yup.array()
    .of(familyMemberSchema),
});

You can now easily render these fields using FormArrayField, which is exported by useFormup:

const Example = () => {
  const {
    FormArrayField,
    formikForm,
    FormInput,
    Form,
  } = useFormup(schema);

  return (
    <Form formikForm={formikForm}>
      {/* Render array of strings */}
      <FormArrayField name="colors">
        {(items, arrayHelpers) => (
          <>
            {items.map((item, index) => (
              <div key={item.path}>
                <FormInput name={item.path} />

                <button
                  onClick={() => arrayHelpers.remove(index)}
                  type="button"
                >
                  Remove item
                </button>
              </div>
            ))}

            <button
              onClick={() => arrayHelpers.push()}
              type="button"
            >
              Add item
            </button>
          </>
        )}
      </FormArrayField>

      {/* Render array of objects */}
      <FormArrayField name="familyMembers">
        {(items, arrayHelpers) => (
          <>
            {items.map((item, index) => (
              <div key={item.path}>
                <FormInput name={item.getPath('name')} />

                <FormInput name={item.getPath('email')} />

                <button
                  onClick={() => arrayHelpers.remove(index)}
                  type="button"
                >
                  Remove family member
                </button>
              </div>
            ))}

            <button
              type="button"
              onClick={() => arrayHelpers.push({
                email: '[email protected]',
                name: 'Foo bar',
              })}
            >
              Add new family member
            </button>
          </>
        )}
      </FormArrayField>
    </Form>
  );
};

💅 Improvements

• 💅 FormInput component now validates if the field passed by "name" exists within the schema.

• 💅 FormInputGroup component now validates if the field passed by "name" exists within the schema.

• 💅 yup version was bumped to 0.29.1.

• 💅 Removed unnecessary dependencies.

1.4.0

🔥 Automatic mapping of schema properties into FormInput properties

Formup will now automatically map schema properties into FormInput properties, in an attempt to make your schema a single-source-of-truth in your code.

Currently, it will map:

• label into label and aria-label properties

Note: You can override any mapped property by passing it directly to FormInput.

1.3.31

🐛 Bugfixes

• 🐛 Fixed a bug where passing a truthy defaultValue to FormInput would override a falsy value.