mui-phone-textfield

A phone number input for Material-UI.

Installation

To install this package via npm:

npm i mui-phone-textfield

And its peer dependencies:

npm i react react-dom @mui/material @emotion/react @emotion/styled

Usage

The package exports mainly two components: PhoneTextField and CountrySelect

You can use the text input alone:

import { Box } from "@mui/material";
import PhoneTextField from "mui-phone-textfield";
import { useState } from "react";

function Example() {
  const [value, setValue] = useState("");
  const [country, setCountry] = useState("US");

  return (
    <Box sx={{ m: 2 }}>
      <PhoneTextField
        country={country}
        onCountryChange={setCountry}
        onPhoneNumber={setValue}
      />
      <Box sx={{ my: 1 }} />
      {value && <Box>This is a valid {country} phone number: {value}</Box>}
    </Box>
  );
}

You can also separate the country menu and the text input:

import { Box } from "@mui/material";
import { CountrySelect, PhoneTextField } from "mui-phone-textfield";
import { useState } from "react";

function Example() {
  const [value, setValue] = useState("");
  const [country, setCountry] = useState("US");

  return (
    <Box sx={{ m: 2 }}>
      <CountrySelect value={country} onCountryChange={setCountry} />
      <Box sx={{ my: 1 }} />
      <PhoneTextField hideSelect country={country} onPhoneNumber={setValue} />
      <Box sx={{ my: 1 }} />
      {value && <Box>This is a valid {country} phone number: {value}</Box>}
    </Box>
  );
}

Props

PhoneTextField

In addtion to TextField's props, The PhoneTextField component accepts the following:

prop	type	description
country	string	The selected country. A two-letter ISO country code
hideSelect	boolean	Hides the internal select component. Useful when using CountrySelect alongside this component
disableFormatting	boolean	Disables formatting the user's input
onCountryChange	function	Callback fired when a user selects a country from the menu. It receives a country code
onPhoneNumber	function	Callback fired when the input value changes. If the input is a valid phone number for the current country, it receives it in E.164 format, otherwise it receives an empty string

CountrySelect

In addtion to Select's props, The CountrySelect component accepts the following:

prop	type	description
hideCallingCode	boolean	Hides the calling code when rendering the selected value
hideCountryName	boolean	Hides the country name when rendering the selected value
placeholder	ReactNode	Renders the provided placeholder node when displayEmpty is set
onCountryChange	function	Callback fired when a user selects a country from the menu. It receives a country code

Contributing

Prerequisites

• nodejs
• npm

Getting Started

After cloning this repo, ensure dependencies are installed by running:

npm i

To build the final bundle:

npm run build

To rebuild on each change:

npm run dev

Commiting changes

Please follow the conventional commits specification, because semantic-release is used to automate the whole package release workflow including: determining the next version number, generating the release notes and publishing the package.

License

MIT