https://github.com/andria-dev/mui-phone-input

A phone number input built with material-ui's TextField
https://github.com/andria-dev/mui-phone-input

Last synced: 23 days ago
JSON representation

A phone number input built with material-ui's TextField

• Host: GitHub
• URL: https://github.com/andria-dev/mui-phone-input
• Owner: andria-dev
• License: mit
• Created: 2019-01-19T02:22:05.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-10-05T23:49:14.000Z (about 5 years ago)
• Last Synced: 2024-05-02T04:50:26.538Z (8 months ago)
• Language: JavaScript
• Homepage: https://codesandbox.io/s/3x2kwrxyjm
• Size: 438 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# mui-phone-input

This is a simple wrapper around material-ui's `` component. This wrapper handles the input as a phone number. It only allows numbers, and dashes are automatically inserted and removed while typing.

Here is what the input looks like while typing:

![GIF of typing numbers into input](mui-phone-input.gif)

# Install

```bash

npm i mui-phone-input

# or

yarn add mui-phone-input

```

# Usage with React

All properties available to [material-ui's ``](https://material-ui.com/api/text-field/) are available to ``.

Here is a minimal example of using the input:

```jsx

import React from 'react';

import PhoneInput from 'mui-phone-input';

function App() {

  const [value, setValue] = React.useState('');

  return (

    


      

      
Your phone number is {value}

    

  );

}

```


### Notes:

- 90% of the time, you won't need to use two-way data binding. This is due to the fact that this input formats everything for you.

- However, two-way data binding is still available.