react-phone-input-auto-format

Auto formatting phone input React component, US only

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-phone-input-auto-format
730.1.04 years ago5 years agoMinified + gzip package size for react-phone-input-auto-format in KB

Readme

React Phone Input Auto Format
This is an auto-formatting phone input component.
If an Input component is passed as the inputComponent prop, it will be rendered instead of the default html input which allows easy integration with Styled Components
Also exposes utility functions to normalize and format the phone number.
Pros:
  • United States only (if you are only dealing with US numbers)
  • Easily integrates with styled components

Phone Input Video
If you wish to use the styling displayed above, check out the demo source

Installation

npm install react-phone-input-auto-format --save

Usage

Basic

import React from "react";
import PhoneInput from "react-phone-input-auto-format";

const onChange = phoneNumber => {
  // do something with the phone number
};
const Form = () => {
  return <PhoneInput onChange={onChange} />;
};

export default Form;

With Styled Component

Also see the demo
import React from "react";
import PhoneInput from "react-phone-input-auto-format";
import styled from "styled-components";

const Input = styled.input`
  border: 1px solid blue;
  font-size: 2em;
`;
const onChange = phoneNumber => {
  // do something with phone number
};
const Form = () => {
  return <PhoneInput onChange={onChange} inputComponent={Input} />;
};
export default Form;

With Utility Functions

Also see the demo and demo source
import React from "react";
import PhoneInput, { format, normalize } from "react-phone-input-auto-format";

const onChange = phoneNumber => {
  const formatted = format(phoneNumber); // (123) 456-7890
  const normalized = normalize(phoneNumber); // 1234567890

  // do something with the formatted or normalized number
};

const Input = () => {
  return <PhoneInput onChange={onChange} />;
};

export default Input;

Props

| name | type | description | | -------------- | --------------- | --------------------------------------------------------------------------- | | onChange | function | Returns the value of the input field | | inputComponent | React Component | Will be used as the input if given, otherwise will use a default HTML input |
Other properties (not documented) are applied to the root element.