Valor de número de teléfono internacional

Valor de número de teléfono internacional en Storybook

Uso

Este es un componente de utilidades para renderizar y dar formato a los datos, por eso, no hay pautas de UX específicas.

Código

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

Instrucción de importación

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

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

className

Tipo

string

Descripción

CSS class name for this component.

dataType

Tipo

'string' | 'object'

Descripción

Type of returned value.

Valor predeterminado

'object'

defaultCountry

Tipo

ISOCountryCodes

Descripción

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

id

Tipo

string

Descripción

Unique identifier for the component.

path

Tipo

string

Descripción

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

prefix

Tipo

IntlMessageShape

Descripción

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

showCountryCodeForReadOnly

Tipo

boolean

Descripción

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

Valor predeterminado

true

suffix

Tipo

IntlMessageShape

Descripción

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

tag

Tipo

string

Descripción

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

Valor predeterminado

'div'

value

Tipo

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

phoneNumberobligatorio

Tipo

string

Descripción

Phone number in the component.

countryCode

Tipo

ISOCountryCodes

Descripción

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

Descripción

Value to display.

Ganchos

No hay ganchos para PhoneNumberValue.

Claves de traducción

No hay traducciones para PhoneNumberValue.

Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Ejemplos

Consulte la sección Uso para obtener detalles sobre cómo diseñar un valor de número de teléfono correctamente y las diferentes opciones de configuración que ofrecemos.

Ejemplo de número de teléfono básico

Puede dar a la propiedad value un objeto del formulario { phoneNumber: string } y se renderizará como un número de teléfono. Agregará un código de país según su configuración regional y aplicará otros formatos requeridos.

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

Ejemplo de código de país

Puede especificar un código de país para agregarlo al número incluyendo una propiedad countryCode en el objeto utilizado como value.

Esta propiedad toma un objeto como { code: string } cuando el string es un código de país ISO válido.

<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
  }} />

Ejemplo de código de país predeterminado

Con la propiedad defaultCountryCode, puede especificar un código de país predeterminado para usar en lugar del que se basa en su configuración regional.

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

Ejemplo de cómo ocultar el código de país

Para mostrar un número de teléfono sin el código de país, establezca showCountryCodeForReadOnly en false.

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

Ejemplo de valor de string

Puede utilizar un valor de string, pero también debe establecer dataType en false.

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

Registro de cambios