formik-components

Formik Wrappers for 3rd Party Components

Why?

Formik makes building React forms painless. 👍

However, if you want to use it with 3rd party form components (eg. a fancy date picker), you need to make sure event handlers are hooked up correctly. That becomes tedious when multiple projects use the same 3rd party components w/ Formik.

This project includes Formik wrappers for several popular 3rd party components to act as drop-in replacements in Formik forms.

Supported Components

• react-dates
• react-datetime
• react-select

Conventions

Wrapped components generally require a field prop and an input prop.

The field prop must be equivalent to the name attribute on the field to match up with the Formik state.

The input prop is an object that contains value, onChange, and onBlur:

• value must be provided the field's value from Formik's values
• onChange must be provided Formik's setFieldValue
• onBlur must be provided Formik's setFieldTouched

All other props passed to these components are passed through to the 3rd party component, so you can still customize it to your liking.

Contributing

Do you want a Formik wrapper for another component library? Have you written a Formik wrapper for another component library? Consider making an issue or submitting a pull request. Your contributions are greatly appreciated! ❤️

License

See LICENSE