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.
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.
npm install phone-number-prop-type --saveimport 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: '+1 555-555-555',
}
PhoneNumber.propTypes = {
phoneNumber: phoneNumberPropType,
}
export default PhoneNumber;