International phone number value
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 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'
/>
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
stringDescriptionCSS class name for this component.
dataType- Type
'string' | 'object'DescriptionType of returned value.
Default value'object' defaultCountry- Type
ISOCountryCodesDescriptionDefault country code to be rendered. Must be an ISO country code string.
id- Type
stringDescriptionUnique identifier for the component.
path- Type
stringDescriptionSpecifies the path to the value used to generate the output.
prefix- TypeDescription
Optional prefix message to be attached in front of the value.
showCountryCodeForReadOnly- Type
booleanDescriptionDetermines whether the country code is visible if the phone number is rendered in
readOnlymode.Default valuetrue suffix- TypeDescription
Optional suffix message to be attached at the end the value.
tag- Type
stringDescriptionThe HTML tag to use when rendering the outermost element of this component.
Default value'div' value- TypeDescription
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.