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.

$3

!alt tag

$3

!alt tag

Installation

``shell-script
npm install react-phone-input-material-ui --save

or

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

Contributing

Code style changes not allowed

License


Based on react-phone-input

Make sure you donated for lib maintenance