monstrag/react-phone-input-mui

Highly customizable phone :telephone_receiver: input component with auto formatting

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 v4 and v5.

Original look:

With The Material UI's TextField:

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, ideally TextField

import React from 'react';
import ReactPhoneInput from 'react-phone-input-material-ui';
import { TextField, withStyles } from '@material-ui/core';

const styles = theme => ({
  field: {
    margin: '10px 0',
  },
  countryList: {
    ...theme.typography.body1,
  },
});


function PhoneField(props) {
  const { value, defaultCountry, onChange, classes } = 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}
        inputClass={classes.field}
        dropdownClass={classes.countryList}
        component={TextField}
      />
    </React.Fragment>
  );
}

export default withStyles(styles)(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