How can I use persian numbers with react-number-format

339 Views Asked by At

I created this component with react-number-format

const NumberFormatCustom = React.forwardRef(function NumberFormatCustom(
  props,
  ref
) {
  const { onChange, ...other } = props;
  return (
    <NumericFormat
      {...other}
      getInputRef={ref}
      onValueChange={(values) => {
        onChange({
          target: {
            name: props.name,
            value: values.value,
          },
        });
      }}
      maxLength={11}
      allowLeadingZeros
      // isNumericString
    />
  );
});

and I passed it to my TextField component of MUIv5.

     InputProps={{
            inputComponent: NumberFormatCustom,
          }}

but it doesn't work. the onChange prop of my TextField don't work at all

I tried some approaches like this :

 e.target.value.replace(/[۰-۹]/g, (d) => "۰۱۲۳۴۵۶۷۸۹".indexOf(d))

but it didn't work because onChange is not working. I tried to add replace function to value part of NumericFormat but it didn't work either.

how can I handle it?

0

There are 0 best solutions below