harish-everest
react-phone-input-material-ui
Highly customizable phone input component with auto formatting. Based on the wonderful react-phone-input-2 package.
Supports Material-UI v5 and v6.
Original look:
With The Material UI's TextField:
Installation
npm install react-phone-input-material-ui --save
or
yarn add react-phone-input-material-uiUsage with Material UI
Mandatory props: value and onChange for controlling field; component, which should be TextField from @mui/material.
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 (
<React.Fragment>
{/* Simple usage */}
<ReactPhoneInput
value={value}
onChange={onChange} // passed function receives the phone value
component={TextField}
/>
{/* Configure more */}
<ReactPhoneInput
value={value}
defaultCountry={defaultCountry || 'gb'}
onChange={onChange}
component={TextField}
inputProps={{
sx: {
margin: '10px 0',
},
}}
dropdownStyle={{
fontFamily: 'sans-serif',
}}
/>
</React.Fragment>
);
}
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
Contributing
Code style changes not allowed
License
Based on react-phone-input
Make sure you donated for lib maintenance 