NumberFormat type exception

Question

I am trying to use number format and I keep getting an error "react-number-format": "^5.2.2",

import * as React from 'react';
import NumberFormat from 'react-number-format';

export function NumericInput(props: {
    inputRef: (instance: NumberFormat | null) => void;
    onChange: (event: { currentTarget: { name: string; value: string } }) => void;
    name: string;
    variant?: 'int' | 'float';
}) {
    const { inputRef, onChange, variant, ...other } = props;
    const parseMethod = variant && variant === 'int' ? parseInt : parseFloat;
    return (
        <NumberFormat
            {...other}
            getInputRef={inputRef}
            onValueChange={(values) => {
                onChange({
                    currentTarget: {
                        name: props.name,
                        value: isNaN(parseMethod(values.value))
                            ? '0'
                            : parseMethod(values.value).toFixed(2),
                    },
                });
            }}
            maxLength={17}
            thousandSeparator
            isNumericString
        />
    );
}

These are the errors I keep getting

Cannot use namespace 'NumberFormat' as a type.ts(2709)
JSX element type 'NumberFormat' does not have any construct or call signatures.

I have tried using NumericFormat with the same issue

Answer 1

After migrating to v5, the whole NumberFormat module was divided into smaller modules. Before v5:

import NumberFormat from 'react-number-format';

After v5:

// NumericFormat for Number based formatting like currency inputs.
import { NumericFormat } from 'react-number-format';

// PatternFormat for Pattern based formatting like card numbers, phone number inputs.
import { PatternFormat } from 'react-number-format';