Expose Formik injected props PropTypes

[ClementParis016]

🚀 Feature request

Current Behavior

I guess the only way to type Formik forms correctly today is to use TypeScript, but if you don't, you have to declare PropTypes manually (unless I'm missing something, I couldn't find anything that would look like PropTypes being exported from the module).

Desired Behavior

When not using TypeScript, I would like to be able to import PropTypes definitions for the props that Formik injects.

Suggested Solution

Since Formik is written in TypeScript I don't think it uses prop-types internally so I don't know what's the best way to do that. Maybe there is some way to transform TS types to prop-types declarations?

Who does this impact? Who is this for?

Non-TypeScript users.

Describe alternatives you've considered

Defining all Formik's PropTypes manually in a module and import it whenever I build a form.

Additional context

N/A

[jaredpalmer]

Hey! I know prop-types are still somewhat popular. However, at The Palmer Group we are 100% TypeScript and so we have limited utility from them anymore. That being said, you raise a valid point about ensuring that all required props are defined in a human readable way with vanilla JS. Let me think about this.

[kylemh]

Would love this! Just came a-lookin.

Found an SO post on it, and it looks like there's a nice Babel plugin that does it. Haven't looked to see if you compile with Babel or TS tho.

https://stackoverflow.com/questions/54060057/generating-proptypes-for-react-components-written-in-typescript

[javierguzman]

I am interested in this as well. Any news about it?

Thanks and regards.

[Leenzuur]

Hi all ! Interested too Thank you

[metamn]

+1

[ClementParis016]

We've since added TS to the project I'm working on but for those interested our old JS code still uses this small module I wrote (I'm not sure if it's up to date with latest Formik versions though):

import PropTypes from 'prop-types';

/**
 * Formik doesn't expose its injected props prop-types, so this file declares
 * them manually so we can re-use them easily.
 *
 * From https://jaredpalmer.com/formik/docs/api/formik#formik-render-methods-and-props
 */
export const formikInjectedPropsTypes = {
  dirty: PropTypes.bool.isRequired,
  errors: PropTypes.object.isRequired,
  handleBlur: PropTypes.func.isRequired,
  handleChange: PropTypes.func.isRequired,
  handleReset: PropTypes.func.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  isSubmitting: PropTypes.bool.isRequired,
  isValid: PropTypes.bool.isRequired,
  isValidating: PropTypes.bool.isRequired,
  resetForm: PropTypes.func.isRequired,
  setErrors: PropTypes.func.isRequired,
  setFieldError: PropTypes.func.isRequired,
  setFieldTouched: PropTypes.func.isRequired,
  submitForm: PropTypes.func.isRequired,
  submitCount: PropTypes.number.isRequired,
  setFieldValue: PropTypes.func.isRequired,
  setStatus: PropTypes.func.isRequired,
  setSubmitting: PropTypes.func.isRequired,
  setTouched: PropTypes.func.isRequired,
  setValues: PropTypes.func.isRequired,
  status: PropTypes.any,
  touched: PropTypes.object.isRequired,
  values: PropTypes.object.isRequired,
  validateForm: PropTypes.func.isRequired,
  validateField: PropTypes.func.isRequired,
};

[javierguzman]

Thanks @ClementParis016 !