Package Exports

react-phone-input-material-ui
react-phone-input-material-ui/lib/lib.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-phone-input-material-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

alt tag

With The Material UI's TextField:

alt tag

Installation

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.

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