Add inputProps prop that lets you pass props down to the inputComponent

This would be very useful when you have props that you need to pass all the way down to the inputComponent.

Otherwise, you have to create a new hard-coded component for literally every unique combination of props that you may want to pass down to the input component. For example, if you wanted to use PhoneInput several places in your app but wanted to use a different label prop (or helperText or …) in each place, you would have to do something horrific like this:

const TextFieldWithLabel1 = ({ ...props }) => {
  return (
    <TextField {...props}
      label="Phone number"
    />
  )
}

const TextFieldWithLabel2 = ({ ...props }) => {
  return (
    <TextField {...props}
      label="Optional phone number"
    />
  )
}

        <PhoneInput inputComponent={TextFieldWithLabel1} />
        <PhoneInput inputComponent={TextFieldWithLabel2} />

What I’d like is a way to simply pass the props down like this:

        <PhoneInput
          inputComponent={TextField}
          inputProps={{
            label: "Optional phone number"
          }}
        />

This is how https://material-ui.com/api/text-field/#props lets you pass props to the <input> component that it wraps, for example.

[catamphetamine]

An example of how clashing (colliding) props like error could be passed:

src/PhoneInput.js

import PhoneInput from 'react-phone-number-input'
import MUIInput from 'material-ui'

function CustomInput({ errorProperty, ...rest }, ref) {
  return (
    <MUIInput 
      ref={ref} 
      error={errorProperty} 
      {...rest}/>
  )
}

CustomInput = React.forwardRef(CustomInput)

function CustomPhoneInput({ error, ...rest }, ref) {
  return (
    <PhoneInput
      ref={ref}
      {...rest}
      numberInputComponent={CustomInput}
      errorProperty={error}/>
  )
}

CustomPhoneInput = React.forwardRef(CustomPhoneInput)

export default CustomPhoneInput

[catamphetamine]

Ok, added numberInputProps and countrySelectProps today. Still the existing “passthrough” approach is preferred I guess (for the <input/> props).