How to add types for redux-form's Field wrapper

Question

I have this component.

//@flow
import React from 'react'
import { Field } from 'redux-form'
import type { FieldProps } from 'redux-form';
import TextField from 'material-ui/TextField'

const renderField= ({ input, label, disabled, meta: { touched, error } }: FieldProps) => {
  //component defn
}

export const InputField = (props) => {
  return (
    <Field
      {...props}
      component={renderField}
    />
  )
}

Input field accept all props what redux-form Field accept plus custom props. The question is how to flowify my props for InputField? redux-forms index.js.flow exports types for renderField(FieldProps) but it doesn't export types for Field component. Did I miss something?

kalley kalley · Accepted Answer · 2018-02-06T15:44:55

You can use React.ElementProps (import type { ElementProps } from 'react' or change your react import to import * as React from 'react').

Then you can do something like:

type OGFieldProps = React.ElementProps<typeof Field>
type Props = $Diff<OGFieldProps, { component: $PropertyType<OGFieldProps, 'component'> }>

The reason I'm doing the diff is because otherwise you'll have to pass component, but since you're doing it in your InputField already, you probably don't want someone to pass one in thinking it's going to override.

How to add types for redux-form's Field wrapper

1 Answers