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}
    />
  </>
);