{"library":"react-international-phone","title":"React International Phone Input","description":"React International Phone is a lightweight and easy-to-integrate React component for handling international phone number inputs. It's currently at stable version 4.8.0, with frequent minor and patch releases to update country data, fix bugs, and add small features. Key differentiators include its small bundle size with no third-party runtime dependencies, automatic country guessing based on input, comprehensive validation utilities, and flexible customization options. It also provides a headless hook (`usePhoneInput`) for integrating with any UI library, allowing developers to maintain consistent styling while leveraging the library's core functionality for phone number formatting and country detection. It ships with TypeScript types for enhanced developer experience.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-international-phone"],"cli":null},"imports":["import { PhoneInput } from 'react-international-phone';","import { usePhoneInput } from 'react-international-phone';","import { isValidPhoneNumber } from 'react-international-phone';","import 'react-international-phone/style.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useState } from 'react';\nimport { PhoneInput } from 'react-international-phone';\nimport 'react-international-phone/style.css';\n\nconst App = () => {\n  const [phone, setPhone] = useState('');\n\n  return (\n    <div style={{\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      minHeight: '100vh',\n      fontFamily: 'sans-serif'\n    }}>\n      <h1>Phone Number Input</h1>\n      <PhoneInput\n        defaultCountry=\"us\"\n        value={phone}\n        onChange={(phone) => setPhone(phone)}\n        inputProps={{\n          name: 'phone',\n          placeholder: 'Enter phone number',\n          autoComplete: 'tel'\n        }}\n        className=\"my-custom-phone-input\"\n      />\n      <p style={{ marginTop: '20px' }}>Current Phone: {phone || 'None'}</p>\n    </div>\n  );\n};\n\nexport default App;","lang":"typescript","description":"This quickstart demonstrates a basic international phone input component, initializes it with a default country, and updates the state on change. It also shows how to include the necessary styles and add basic input props.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}