implement a MaskedTextBox that displays the country flag

[Tejas]

How can I implement a MaskedTextBox that displays the country flag automatically when a country code like +1 or +2 is entered for a phone number?

 

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  MaskedTextBox,
  InputPrefix,
  InputSuffix,
} from "@progress/kendo-react-inputs";
import { Button } from "@progress/kendo-react-buttons";
import { Icon } from "@progress/kendo-react-common";
const prefix = () => (
  <InputPrefix>
    <Icon name="user" />
  </InputPrefix>
);
const suffix = () => (
  <InputSuffix>
    <Button themeColor="primary" fillMode={"flat"} rounded={null}>
      Send
    </Button>
  </InputSuffix>
);
const App = () => {
  return (
    <div>
      <div>Number:</div>
      <MaskedTextBox
        prefix={prefix}
        suffix={suffix}
        mask="[phone]-00"
        defaultValue="[phone]-21"
        width={300}
      />
    </div>
  );
};  

[Wissam]

Hello, Tejas,

Thank you so much for providing a code sample.

You can achieve this by controlling the MaskedTextBox value and dynamically rendering a flag based on the component's value.

In the below example, when changing the value to start with either `+1` or `+2`, the Icon rendered inside the InputPrefix changes to a share icon. In your case, you can render a country flag instead:

• https://stackblitz.com/edit/react-icxecd?file=app%2Fmain.jsx

For more information on rendering the MaskedTextBox in controlled mode, check the following article:

• https://www.telerik.com/kendo-react-ui/components/inputs/maskedtextbox/value/

I hope this helps, but please let me know if you have any further questions.

Regards,
Wissam
Progress Telerik