1.2.20

📈 Improvements

• 📈 The property isValid is now available in formikForm, returned by useFormup hook. You can use it to quickly check if your form is valid =).

Here's an example:

<button disabled={!formikForm.isValid}>
  Submit
</button>

1.2.19

🐛 Bugfixes

• 🐛 Fixed a bug where the FormInput validation was always one render behind the form state.

1.2.18

🐛 Bugfixes

• 🐛 Fixed a bug where formupData was being injected as undefined into the custom input component when injectFormupData passed to FormInput was false.

1.2.17

🔥 Extra formup information now available in FormInput component

When rendering custom inputs with FormInput, now you can access more information related to formup, such as the validation error message!

• You can pass the prop injectFormupData to a specific FormInput component. This means that FormInput will inject a prop named formupData into the component it renders, passed with the component prop.

• In your custom component, can now access the prop formupData, which is an object containing all information! 🥂

⚠️ This is disabled by default to maintain compatibility. If enabled, you need to make sure that formupData won't be injected into the final <input /> component, otherwise React will throw an error saying that formupData is an invalid property for <input />.

Here's an example:

• In FormInput, add the injectFormupData prop.

  <FormInput
    component={CustomInputWithErrorMessage}
    injectFormupData={true}
    name="email"
  />

• In your component, handle formupData prop:

const CustomInputWithErrorMessage = ({
  formupData,
  ...props
}) => (
  <>
    {
      formupData && formupData.errorMessage && (
        <label>
          {`Error: ${formupData && formupData.errorMessage}`}
        </label>
      )
    }

    <input
      {...props}
    />
  </>
);

1.2.16

🐛 Bugfixes

• 🐛 Fixed a bug where boolean schema types would always start as true, ignoring defaultValue.

1.2.00

🔥 Single-choice and multiple-choice input groups are here!

• You can use FormInputGroup and FormInputGroupItem components to easily setup choice components in your form!
• You can use the multi prop in FormInputGroup to make the result an array and auto-validate selected options.
• You can use the initialValue prop in FormInputGroup to set initial checked items.

Here's an example:

<FormInputGroup name="gender">
  <p>What's your gender?</p>

  <FormInputGroupItem value="Male" />
  <FormInputGroupItem value="Female" />
  <FormInputGroupItem value="Non-binary" />
</FormInputGroup>