Live ⚡️

• Demo Example App

  https://ivonto.com

• Planum Storybook

  https://planum-storybook.netlify.app

Install

# npm
npm install @ivonto-main/planum-phone

# yarn
yarn add @ivonto-main/planum-phone

import { PhoneInput } from '@ivonto-main/planum-phone'

The input supports controlled value and onChange props. Clearing the field emits an empty string, and later controlled-value updates (for example after an asynchronous form reset) are reflected in the displayed number.

Localization (1.0.7)

Pass countryNames (ISO alpha-2 keys), locale, searchPlaceholder, searchLabel (defaults to the search placeholder), and emptyTitle from your translation layer. Missing or blank country names fall back to English. getCountries is exported to enumerate the supported codes.

Memoize countryNames in consumers. Changing it or locale updates the sorted list and search while preserving the selected country and phone value. Country names are presentation only: ISO codes and calling codes are unchanged.

Run yarn workspace @ivonto-main/planum-phone test for browser-free localization and controlled/uncontrolled state regression checks.