Détail du package

@xuda.io/xuda-ui-plugin-libphonenumber

xuda.io15Proprietary software licenses1.0.11

The Xuda UI Plugin based on libphonenumber-js seamlessly integrates international phone number parsing, formatting, and validation into the Xuda environment, ensuring accurate, user-friendly input and display of phone numbers, enhancing data quality and i

Xuda, UI plugin, libphonenumber-js, International phone numbers

readme

Xuda libphonenumber-js Plugin

The Xuda libphonenumber-js Plugin integrates the libphonenumber-js library into the Xuda platform, allowing you to parse, format, and validate international phone numbers easily. By simplifying and standardizing phone number display, this plugin enhances user experience, data quality, and overall communication workflows within your application.

Features

  • Automatic Formatting: Choose between national or international phone number formats for clear, consistent displays.
  • Country Cues: Optionally add flags or country codes to provide immediate context about the phone number’s origin.
  • Validation Indicators: Display icons to quickly confirm number validity, assisting users in entering correct, actionable phone numbers.
  • Click-to-Dial: Make phone numbers interactively clickable, enabling users to initiate calls directly from your UI.

Properties

Property Type Render Description Default Value Options
format string select Choose how to format the phone number. formatNational displays the number in local format, formatInternational includes the country code. formatNational - Format National (formatNational)
- Format International (formatInternational)
addCountryFlag boolean segment Display a country flag icon next to the phone number, providing a visual cue of the number’s country. false - Yes (true)
- No (false)
addCountryCode boolean segment Show the country’s calling code alongside the formatted number for international clarity. false - Yes (true)
- No (false)
clickToDial boolean segment Make the number clickable, allowing users to initiate a call directly from the displayed number. false - Yes (true)
- No (false)
addValidationIcons boolean segment Show icons indicating if the phone number is valid or invalid, helping users correct any entry issues. false - Yes (true)
- No (false)

Usage Steps

  1. Open Xuda Studio: Navigate to your component that contains a phone number field.
  2. Configure Properties: Adjust properties like format to choose between local and international formatting, enable flags, or add validation icons.
  3. Test the Result: The plugin applies changes instantly, allowing you to quickly see and refine the phone number’s appearance and behavior.

Examples

  • National Formatting + Flag: Set format to formatNational and addCountryFlag to true to show a local-style number with a corresponding flag.
  • International Formatting + Country Code: Choose formatInternational and addCountryCode to true for globally recognizable numbers.
  • Click-to-Dial: Enable clickToDial to make the displayed number a convenient link, streamlining user interactions.

Further Resources