Formik: Custom input fields with typescript

[Selhar]

📖 Documentation

I'm not really sure if this is a me problem or a documentation problem, but i think it'd be incredibly helpful to provide a custom input sample using typescript.

For example, in the documentation we have this example of a custom input field:

 const CustomInputComponent = ({
   field, // { name, value, onChange, onBlur }
   form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
   ...props
 }) => (
   <div>
     <input type="text" {...field} {...props} />
     {touched[field.name] &&
       errors[field.name] && <div className="error">{errors[field.name]}</div>}
   </div>
 );

but it's not very clear to me how this custom component would look like with static types.

[LinKassem]

@Selhar, It took me some time to figure this out as well. Check this section: https://formik.org/docs/api/field#component
I inferred the type from this line component?: string | React.ComponentType<FieldProps>

I have altered the example you have provided above to have it's own props in addition to formik FieldProps

import React, { FC } from "react";
import { FieldProps } from "formik";

interface CustomInputComponent {
  type?: string;
}

const CustomInputComponent: FC<CustomInputProps & FieldProps> = ({
   field, // { name, value, onChange, onBlur }
   form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
   type = "text",
   ...props
 }) => (
   <div>
     <input type={type} {...field} {...props} />
     {touched[field.name] &&
       errors[field.name] && <div className="error">{errors[field.name]}</div>}
   </div>
 );

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days