{"library":"react-phone-input-2","title":"React Phone Input 2","description":"React Phone Input 2 (currently documented for version 2.15.1) is a highly customizable React component designed for international phone number input with automatic formatting. It features a country dropdown with flag icons and dynamically formats the input based on the selected country, supporting various themes like Material UI and Bootstrap. The library is built on `libphonenumber-js` for accurate validation and adheres to international standards. While this entry focuses on version 2.15.1, it's important to note that a major version 3.x exists. This library distinguishes itself through extensive customization options for appearance and behavior, making it suitable for projects requiring a polished and interactive user experience with internationalization capabilities.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-phone-input-2"],"cli":null},"imports":["import PhoneInput from 'react-phone-input-2'","import 'react-phone-input-2/lib/style.css'","import type { PhoneInputProps } from 'react-phone-input-2'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport PhoneInput from 'react-phone-input-2';\nimport 'react-phone-input-2/lib/style.css'; // Or 'react-phone-input-2/lib/material.css' etc.\n\nfunction MyPhoneNumberInput() {\n  const [phone, setPhone] = useState('');\n\n  const handlePhoneChange = (value, country, e, formattedValue) => {\n    console.log('Raw Value:', value);\n    console.log('Country Object:', country);\n    console.log('Event:', e);\n    console.log('Formatted Value:', formattedValue);\n    setPhone(value);\n  };\n\n  return (\n    <div>\n      <h2>Enter Your Phone Number</h2>\n      <PhoneInput\n        country={'us'}\n        value={phone}\n        onChange={handlePhoneChange}\n        inputProps={{\n          name: 'phone',\n          required: true,\n          autoFocus: true,\n        }}\n        placeholder=\"e.g. +1 702 123 4567\"\n        enableSearch\n        disabled={false}\n      />\n      <p>Current Phone Number: {phone ? `+${phone}` : 'None'}</p>\n    </div>\n  );\n}\n\nexport default MyPhoneNumberInput;","lang":"typescript","description":"Demonstrates a basic international phone number input with state management, country selection, auto-formatting, and a search feature in a functional React component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}