Skip to main content

Phone

Import​

import { Phone } from '@resultadosdigitais/tangram-components'

Properties​

value​

Typeany

Description​

Sets input's value. Equivalent to the defaultValue, the component Phone is not controllable.

If present, this property must always come with the + sign and country calling code, for example: "+5522999213445", "+55 (22) 99921-3445" are correct, but "5522999213445", "55 (22) 99921-3445", "(22) 99921-3445" are incorrect.

defaultValue​

Typeany

Description​

Sets input's value.

If present, this property must always come with the + sign and country calling code, for example: "+5522999213445", "+55 (22) 99921-3445" are correct, but "5522999213445", "55 (22) 99921-3445", "(22) 99921-3445" are incorrect.

defaultCountry​

TypePhone.allowedCountries

Description​

Country code initially selected when value and defaultValue are not present.

If this property is not present, as well as value and defaultValue, the component will try to infer the country code through browser language, or will initialize with the Brazil code ("BR") by default.

disabled​

Typebool
Defaultfalse

Description​

Sets if input is disabled

error​

Typebool
Defaultfalse

Description​

Sets if input is invalid

onChange​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.
Paramphone string - The input phone number, without mask, with the country calling code.
Paraminfos object - Additional information about component status.
  • infos.number string - The input phone number as seen in the input.
  • infos.code string - The country calling code.
  • infos.country string - The selected country ISO code.
  • infos.valid boolean - true if the phone number is valid for the selected country, and false otherwise.

Description​

Callback fired when the value changes.

onClear​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.
Paramphone string - The input phone number. In this event, it will always be an empty string ('').
Paraminfos object - Additional information about component status.
  • infos.number string - The input phone number as seen in the input.
  • infos.code string - The country calling code.
  • infos.country string - The selected country ISO code.
  • infos.valid boolean - true if the phone number is valid for the selected country, and false otherwise.

Description​

A callback called when the clear button is clicked.

onBlur​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.
Paramphone string - The input phone number, without mask, with the country calling code.
Paraminfos object - Additional information about component status.
  • infos.number string - The input phone number as seen in the input.
  • infos.code string - The country calling code.
  • infos.country string - The selected country ISO code.
  • infos.valid boolean - true if the phone number is valid for the selected country, and false otherwise.

Description​

Callback fired when the input is blurred.

onFocus​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.
Paramphone string - The input phone number, without mask, with the country calling code.
Paraminfos object - Additional information about component status.
  • infos.number string - The input phone number as seen in the input.
  • infos.code string - The country calling code.
  • infos.country string - The selected country ISO code.
  • infos.valid boolean - true if the phone number is valid for the selected country, and false otherwise.

Description​

Callback fired when the input is focused.

countryNames​

TypeobjectOf
DefaultPhone.translations.en.countryNames

Description​

Custom name for countries.

It should be an object in the format { US: 'Estados Unidos', BR: 'Brasil', ... }. The list with the allowed country codes by the component can be consulted under Phone.allowedCountries.

Preset values for English, Brazilian Portuguese and Spanish are available in Phone.translations.en.countryNames, Phone.translations.ptBR.countryNames and Phone.translations.es.countryNames.

countryCallingCodeLabelText​

Typestring
DefaultPhone.translations.en.countryCallingCode

Description​

Custom text for the label that identifies the country calling code in the component. This text is not displayed on the screen.

Preset values for English, Brazilian Portuguese and Spanish are available in Phone.translations.en.countryCallingCode, Phone.translations.ptBR.countryCallingCode and Phone.translations.es.countryCallingCode.

selectedCountryLabelText​

Typestring
DefaultPhone.translations.en.selectedCountry

Description​

Custom text for the label that identifies the country list in the component. This text is not displayed on the screen.

Preset values for English, Brazilian Portuguese and Spanish are available in Phone.translations.en.selectedCountry, Phone.translations.ptBR.selectedCountry and Phone.translations.es.selectedCountry.

clearLabelText​

Typestring
DefaultPhone.translations.en.clear

Description​

Custom text for the label that identifies the clear icon in the component. This text is not displayed on the screen.

Preset values for English, Brazilian Portuguese and Spanish are available in Phone.translations.en.clear, Phone.translations.ptBR.clear and Phone.translations.es.clear.

unidentifiedCountryTooltip​

Typestring
DefaultPhone.translations.en.unidentifiedCountry

Description​

Custom text for the tooltip displayed when the country cannot be identified.

Preset values for English, Brazilian Portuguese and Spanish are available in Phone.translations.en.unidentifiedCountry, Phone.translations.ptBR.unidentifiedCountry and Phone.translations.es.unidentifiedCountry.

Feedback​