A material-ui react component to format phone numbers. Based on react-phone-input-2
npm install react-phone-input-material-uiHighly customizable phone input component with auto formatting. Based on the wonderful react-phone-input-2 package.
Supports Material-UI v5 and v6.
shell-script
npm install react-phone-input-material-ui --saveor
yarn add react-phone-input-material-ui
`Usage with Material UI
Mandatory props:
value and onChange for controlling field; component, which should be TextField from @mui/material.`jsx
import React from 'react';
import ReactPhoneInput from 'react-phone-input-material-ui';
import { TextField } from '@mui/material';function PhoneField(props) {
const { value, defaultCountry, onChange } = props;
return (
{/ Simple usage /}
value={value}
onChange={onChange} // passed function receives the phone value
component={TextField}
/>
{/ Configure more /}
value={value}
defaultCountry={defaultCountry || 'gb'}
onChange={onChange}
component={TextField}
inputProps={{
sx: {
margin: '10px 0',
},
}}
dropdownStyle={{
fontFamily: 'sans-serif',
}}
/>
);
}
export default PhoneField;
``Forked from react-phone-input-2. All the features of react-phone-input-2 are available. I will be update this library frequently to upto date with origin library
Based on react-phone-input
Make sure you donated for lib maintenance 