Phone Number Prop Type

Why are Prop Types important?

Prop Types kind've serve as the interface layer for your component - what data does my component depend on and what is the expected format of that data?

Thus, defining and validating props accurately can add value from a readability and debugging point of view.

What this package does

This package is used to validate if a React prop value is a valid phone number. Currently, there is no phone number prop type defined by the prop-types package. While using PropType.string works, why not be as specific as possible when validating your props?

Additionally, though it's relatively straightforward to create a custom prop type validator, if you need to implement similar prop type checking in multiple packages, you might not want to repeat yourself.

This package depends on the google-libphonenumber package. google-libphonenumber will only validate E.164 formatted) phone numbers.

Installation

npm install phone-number-prop-type --save

Usage

import React from 'react';
import PropTypes from 'prop-types';
import phoneNumberPropType from 'phone-number-prop-type';
 
const PhoneNumber = ({ phoneNumber }) => <h1>Here is my phone number: {phoneNumber}!</h1>;
 
PhoneNumber.defaultProps = {
  phoneNumber: '[phone]',
}
 
PhoneNumber.propTypes = {
  phoneNumber: phoneNumberPropType,
}
 
export default PhoneNumber;

stackblitz Example