{"library":"react-phone-number-input","title":"React Phone Number Input","description":"react-phone-number-input is a comprehensive React component designed for entering and formatting international telephone numbers. It leverages the robust `libphonenumber-js` library internally for accurate parsing, validation, and formatting, ensuring numbers are consistently output in the E.164 format (e.g., \"+12133734253\"). The package is currently at version 3.4.16 and demonstrates an active release cadence, indicating ongoing development and maintenance. Its key differentiators include offering both a full-featured input with an international country select dropdown and a basic input-only variant, alongside native UI integration for country selection on mobile devices. The component effectively handles diverse country codes, various number formats, and provides clear mechanisms for controlling default country selections and managing input changes via its props.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-phone-number-input"],"cli":null},"imports":["import PhoneInput from 'react-phone-number-input'","import PhoneInput from 'react-phone-number-input/input'","import { PhoneInputWithCountrySelect } from 'react-phone-number-input'","import 'react-phone-number-input/style.css'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport 'react-phone-number-input/style.css';\nimport PhoneInput from 'react-phone-number-input';\n\nfunction App() {\n  const [value, setValue] = useState();\n\n  // `value` will be the parsed phone number in E.164 format (e.g., \"+12133734253\").\n  // For an empty input, `value` will be `undefined`.\n  return (\n    <div style={{ maxWidth: '400px', margin: '50px auto', fontFamily: 'sans-serif' }}>\n      <h1>International Phone Input</h1>\n      <p>Enter your phone number below:</p>\n      <PhoneInput\n        placeholder=\"Enter phone number\"\n        value={value}\n        onChange={setValue}\n        defaultCountry=\"US\"\n        international\n        countryCallingCodeEditable={false}\n      />\n      {value && <p>Parsed E.164 Value: <code>{value}</code></p>}\n      {!value && <p>Input is currently empty or invalid.</p>}\n    </div>\n  );\n}\n\nexport default App;","lang":"javascript","description":"This quickstart demonstrates a functional React component using the default `PhoneInput` (with country select). It shows how to manage the input's value using React state and displays the resulting E.164 formatted number, including necessary CSS import and default country setting.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}