International phone number value

International phone number value in Storybook

The PhoneNumberValue component displays a phone number along with the country code and some additional formatting. The phone number is always displayed in the country format as indicated by the country code. For example:

<PhoneNumberValue
  id="number-in-poland"
  value={{
    countryCode: {
      code: 'pl',
    },
    phoneNumber: '600500400',
  }}
/>

The component formats the phone number according to the rules for the pl country code, and adds a country code for Poland (+48):

+48 600 500 400

The value can also be a string:

<PhoneNumberValue
  id="number-in-poland"
  dataType="string"
  value={'+48600700800'}
/>

If you include a country code, like +48, the phone number is formatted according to that code.

If you do not add a country code, like value={"600700800"}, it is formatted according to defaultCountry prop.

Prefix and suffix

Use prefix and suffix props with caution.

Usage will produce what are essentially concatenated strings, like:

"Some prefix string " + somePhoneNumberValue + " some suffix string"

This is not localization friendly. Better practice would be to use a formatted message.

Inlining

By default, the value comes back wrapped in a <div>.

If you want to inline the phone number value, then set the tag prop to span.