React-number-format: customInputProps with Typescript

[cescoferraro]

              <NumberFormat
                customInput={TextField}
                disableUnderline={true}
                value={batch.price}
                onChange={(ev) => {
                  setState({
                    ...state,
                    batches: state.batches.map((bt, idx) => idx === index ? { ...bt, price: ev.target.value } : bt)
                  })
                }}
                decimalScale={2}
                thousandSeparator="."
                decimalSeparator=","
                prefix="R$"
              />

I am using material-ui TextField input as a customInput. Problem is that I need to pass it some other props like disableUnderline, but this prop does not exist on NumberFormat and it makes the typescript compiles scream, although it works!

TS2322: Type '{ customInput: ComponentType<FilledInputProps>; disableUnderline: boolean; value: any; onChange: (ev: ChangeEvent<HTMLInputElement>) => void; decimalScale: number; thousandSeparator: string; decimalSeparator: string; prefix: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NumberFormat> & Readonly<NumberFormatProps> & Readonly<{ children?: ReactNode; }>'.
  Property 'disableUnderline' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NumberFormat> & Readonly<NumberFormatProps> & Readonly<{ children?: ReactNode; }>'.

[cescoferraro]

I forked it and the following works for me
https://github.com/s-yadav/react-number-format/compare/master...cescoferraro:master
but I am afraid there is no typescript way of solving this without creating an extra prop.
Material-ui itself does that by proving an InputProps props so you can pass props to the native element
https://material-ui.com/api/text-field/

[Robfz]

We have the same use case as @cescoferraro, a customInputProps prop would be nice.

Our current workaround is:

const CustomInput = ({ customInputProps, ...inputProps }) => { ... }

...

// @ts-ignore
<NumberFormat
  value={value}
  customInput={CustomInput}
  customInputProps={someProps}
/>

[cescoferraro]

328 solves this @Robfz

can you take a look at this @s-yadav ?

[Yankovsky]

@s-yadav @cescoferraro @Robfz I've fixed typings in https://github.com/s-yadav/react-number-format/pull/330

[Yankovsky]

In the meantime you can install yarn add -D @yankovsky/react-number-format, it is just a fork of 4.0.8 with a fix from pr.

[s-yadav]

I don't think we need customInputProps to solve the typing issue, as we forward all the props to custom input. I liked the @Yankovsky solution to accept any other props. It does allow accepting any random prop, but I think for DX that tradeoff should be ok.
@cescoferraro What do you think?

I have merged and released @Yankovsky PR on v4.1.0