Phonenumber-Format for ReactJS

Format a telephone number 123-345-67890.

This is a simple package that provides the format 123-345-67890 to a telephone number.

It includes:

• Validates that input is numbers only (or dashes, as it automatically adds them).
• It has maximum length. (13 characters counting the 10 digits and 2 dashes).

Usage

1. npm install phonenumber-format --save
2. Import FormatPhoneNumber from 'format-phone-number';
3. Provide props: "onChange" (function) and "value" (string).
4. You can pass it a className string and provide any input style.

Example

import React from 'react';
import FormatPhonenumber from 'format-phonenumber';

class AppComponent extends React.Component {

  constructor (props) {
    super(props);
    this.state = {
      phoneNumber : '',
    };
  }

  render() {
    return (
      <div>
        <FormatPhonenumber
          className="input-formatter"
          onChange={this.handleChange} value={this.state.phoneNumber}
        />
      </div>
    );
  }

  handleChange = (value) => {
    this.setState({
      phoneNumber : value
    })
  }
}

export default AppComponent;

License

MIT