International phone number value

International phone number value in Storybook

Usage

This is a utility component for rendering and formatting data, so there are no specific UX guidelines.

Code

<PhoneNumberValue value={{ phoneNumber: "555-123456" }} />

Import statement

import { PhoneNumberValue } from '@jutro/components';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

className

Type

string

Description

CSS class name for this component.

dataType

Type

'string' | 'object'

Description

Type of returned value.

Default value

'object'

defaultCountry

Type

ISOCountryCodes

Description

Default country code to be rendered. Must be an ISO country code string.

id

Type

string

Description

Unique identifier for the component.

path

Type

string

Description

Specifies the path to the value used to generate the output.

prefix

Type

IntlMessageShape

Description

Optional prefix message to be attached in front of the value.

showCountryCodeForReadOnly

Type

boolean

Description

Determines whether the country code is visible if the phone number is rendered in readOnly mode.

Default value

true

suffix

Type

IntlMessageShape

Description

Optional suffix message to be attached at the end the value.

tag

Type

string

Description

The HTML tag to use when rendering the outermost element of this component.

Default value

'div'

value

Type

{ countryCode?: { code: ISOCountryCodes }, phoneNumber: string}

phoneNumberrequired

Type

string

Description

Phone number in the component.

countryCode

Type

ISOCountryCodes

Description

Optional ISO 3611-1 country codes to include with the phone number.

Description

Value to display.

Hooks

No hooks are available for PhoneNumberValue.

Translation keys

There are no translations for PhoneNumberValue.

For information on how to manage translations, see our section about Internationalization.

Escape hatches

For more information, see our documentation about escape hatches.

Examples

Check out the Usage section for details about how to design a phone number value properly, and the different configuration options we provide.

Basic phone number example

You can give the value property an object of the form { phoneNumber: string } and it will render it as a phone number. It will add a country code depending on your locale and apply other formatting required.

<PhoneNumberValue value={{ phoneNumber: "555-123456" }} />

Country code example

You can specify a country code to add to the number by including a countryCode property in the object used as the value.

This property takes an object like { code: string } where the string is a valid ISO country code.

<PhoneNumberValue value={{ 
  countryCode: { code: "IE" },
  phoneNumber: "01-123456" // Note this is rendered with the leading 0 removed due to the presence of an Irish country code
  }} />

Default country code example

With the defaultCountryCode property, you can specify a default country code to use instead of the one based on your locale.

<PhoneNumberValue 
  value={{ phoneNumber: "01-123456" }} 
  defaultCountryCode="IE"
  />

Hide country code example

You can display a phone number without the country code by setting showCountryCodeForReadOnly to false.

<PhoneNumberValue 
  value={{ phoneNumber: "555-123456" }} 
  showCountryCodeForReadOnly={ false }
  />

String value example

You can use a string value but you must also set dataType to false.

<PhoneNumberValue 
  value="555-123456"
  dataType='string'
  />

Changelog