Error in type annotation of NumberFormatBaseProps (NumberFormatBase)

[akhmadullin]

Describe the issue and the actual behavior

NumberFormatBase component's props have following type annotation:

As you can see, format, removeFormatting and getCaretBoundary props are defined as required props.

But in implementation of NumberFormatBase component we can see, that these props are optional, because they have default value:

Because format, removeFormatting and getCaretBoundary props are defined as required, I have following TS error*, when I try to use NumberFormatBase component with only one set prop - format:

*TS error - Type '{ valueIsNumericString: true; value: string; onValueChange: (values: NumberFormatValues) => void; format: (phoneNumber: string) => string; }' is missing the following properties from type 'NumberFormatBase': removeFormatting, getCaretBoundary ts(2739)

I set only format prop, because I need only custom formatting in my case. But TS expects removeFormatting and getCaretBoundary will be set too. Despite the fact, that removeFormatting and getCaretBoundary props are missing, component works ok, because NumberFormatBase component has default values for these props.

Describe the expected behavior

I see 2 possible solutions:

1. format, removeFormatting and getCaretBoundary props are defined as optional props in type annotation:

type NumberFormatBase = {
  format?: FormatInputValueFunction;
  removeFormatting?: RemoveFormattingFunction;
  getCaretBoundary?: (formattedValue: string) => boolean[];
};

2. If react-number-format for some reason needs format, removeFormatting and getCaretBoundary props to be required, default values of these props should be exported too, to be used where lib users need default behavior:

// react-number-format
export { caretUnknownFormatBoundary, defaultRemoveFormatting, defaultFormat }

// some project
import { NumberFormatBase, caretUnknownFormatBoundary, defaultRemoveFormatting  } from 'react-number-format';

const customFormatter = () => {...};

...

return (
    <NumberFormatBase 
        format={customFormatter}
        removeFormatting={defaultRemoveFormatting}
        getCaretBoundary={caretUnknownFormatBoundary}
    />
)

Provide a CodeSandbox link illustrating the issue

Modified demo from your docs - https://codesandbox.io/s/card-expiry-field-forked-8ex966?file=/src/App.tsx

[danielweil]

UPVOTE

[s-yadav]

Yes, make sense. Will fix the annotation here.

[s-yadav]

This is fixed on v5.2.0

[frindly]

This produces a breaking change in typescript for the useNumericFormat hook

Consider:

const { format, removeFormatting } = useNumericFormat(NumericFormatCurrencyProps);
...
format(val);

This update causes these newly optional properties to be returned as FormatInputValueFunction | undefined, so typescript will now complain with TS2722: Cannot invoke an object which is possibly 'undefined'., Is this hook returning undefined fns for these values actually possible?

[TheAsda]

Facing the same issue

This produces a breaking change in typescript for the useNumericFormat hook

Consider:

const { format, removeFormatting } = useNumericFormat(NumericFormatCurrencyProps);
...
format(val);

This update causes these newly optional properties to be returned as FormatInputValueFunction | undefined, so typescript will now complain with TS2722: Cannot invoke an object which is possibly 'undefined'., Is this hook returning undefined fns for these values actually possible?