Migrating to v5, how to replace function value for format prop?

[mi-na-bot]

Hello, I am wanting to migrate from version 4 to 5 but am encountering a problem with my telephone number fields. Currently the formatting is outsourced to libphonenumber-js by providing a format function, the props are like this:

          format={(s) => formatIncompletePhoneNumber(s, "US")}
          removeFormatting={(s: string) => s.replaceAll(/[^0-9]+/g, "")}

This solution works very well right now, and we would be reluctant to upgrade if it meant abandoning it. Now in PatternFormat the format prop only takes string, and removeFormatting does not exist. Am I missing something?

[mi-na-bot]

I actually found the answer in the customization guide, which offers a highly versatile component, NumberFormatBase which accepts a function format prop a removeFormatting prop like the old v4 monolithic component did. Here is an example using libphonenumber-js, TypeScript and MUI's TextField to provide a formatted phone number component. It works quite well, just like it did in v4. Finally bumping to v5!

import { BaseTextFieldProps, TextField, TextFieldProps, TextFieldVariants } from "@mui/material";
import { formatIncompletePhoneNumber } from "libphonenumber-js";
import { NumberFormatBase, NumberFormatBaseProps } from "react-number-format";

const stripFormat = (s: string) => s.replaceAll(/[^0-9]+/g, "");

export const PhoneNumberTextField = ( props:NumberFormatBaseProps<BaseTextFieldProps>) => {
  return (
    <NumberFormatBase
      variant="outlined"
      format={(s: string) => formatIncompletePhoneNumber(s, "US")}
      removeFormatting={(s: string) => stripFormat(s)}
      customInput={TextField}
      {...props}
    />
  );
};