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

• libphonenumber-js Documentation for in-depth usage, supported formats, and methods.
• Xuda Documentation to learn more about customizing plugins, working with properties, and optimizing your user interface.