{"id":14876,"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.","status":"maintenance","version":"2.15.1","language":"javascript","source_language":"en","source_url":"https://github.com/bl00mber/react-phone-input-2","tags":["javascript","react","phone","format","number","input","telephone","international","typescript"],"install":[{"cmd":"npm install react-phone-input-2","lang":"bash","label":"npm"},{"cmd":"yarn add react-phone-input-2","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-phone-input-2","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as it's a React component.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"Primary way to import the component in modern React (ESM). CommonJS require() is generally incorrect for React components in new projects.","wrong":"const PhoneInput = require('react-phone-input-2');","symbol":"PhoneInput","correct":"import PhoneInput from 'react-phone-input-2'"},{"note":"Crucial for correct rendering and displaying flags. Other themes like `material.css`, `bootstrap.css`, `high-res.css` are also available in the `lib/` directory.","wrong":"/* Missing CSS import */","symbol":"CSS Stylesheet","correct":"import 'react-phone-input-2/lib/style.css'"},{"note":"Import types for TypeScript development.","symbol":"PhoneInputProps","correct":"import type { PhoneInputProps } from 'react-phone-input-2'"}],"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."},"warnings":[{"fix":"Review the official changelog for `react-phone-input-2` v3 for specific migration steps. Test your application thoroughly after upgrading.","message":"This documentation is based on `react-phone-input-2` version `2.15.1`. A major version `3.x` exists and has been actively maintained and released since. Migrating to `3.x` may involve breaking changes to props, event handlers, or internal behavior. Always consult the official `3.x` changelog for migration details.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Add `import 'react-phone-input-2/lib/style.css';` (or your preferred theme) to your entry file or the component where `PhoneInput` is used.","message":"It is critical to import a CSS stylesheet for the component to render correctly, including flags and proper layout. Forgetting this import will result in a functional but unstyled input. Options include `style.css`, `high-res.css`, `material.css`, `bootstrap.css`, `semantic-ui.css`, or `plain.css`.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure the `value` prop is always a string. Convert other types to an empty string `''` if no number is present.","message":"The `value` prop is expected to be a string representing the phone number (e.g., '12133734253' for `+1 (213) 373-4253`). Passing `null`, `undefined`, or other types may lead to unexpected behavior or console warnings.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Monitor the project's GitHub repository for activity and consider contributing or sponsoring if relying heavily on the library. Factor this into long-term maintenance planning.","message":"The project's README explicitly mentions 'DONATIONS / FUNDING NEEDED'. While the project is popular and maintained, this indicates potential sustainability concerns that might impact future development pace or support, especially for older versions.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Utilize the `country` prop to explicitly set the default country, and potentially manipulate the initial `value` if it lacks a country code to ensure correct parsing.","message":"When migrating from older phone number storage systems that might not include country codes, `react-phone-input-2` can incorrectly assume the first few digits of a local number as a country code. This requires careful handling of initial values.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify the exact path for the CSS file. Ensure `react-phone-input-2` is correctly installed. Common paths are `react-phone-input-2/lib/style.css` or `react-phone-input-2/lib/material.css`.","cause":"The stylesheet import path is incorrect or the file does not exist at the specified location.","error":"Module not found: Can't resolve 'react-phone-input-2/lib/style.css'"},{"fix":"Always ensure the `value` prop is a string. If you're storing numbers, convert them to a string before passing, e.g., `value={String(myPhoneNumber)}`.","cause":"The `value` prop passed to `PhoneInput` is not a string, but a number (or other incorrect type).","error":"Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `PhoneInput`, expected `string`."},{"fix":"Add `import 'react-phone-input-2/lib/style.css';` (or another theme like `material.css`) to your main application file or the component where `PhoneInput` is rendered.","cause":"The necessary CSS stylesheet for `react-phone-input-2` has not been imported into your application.","error":"Country flag/styles not appearing correctly, or input looks unstyled."},{"fix":"Ensure `useState` is called directly within a functional component or a custom Hook. Verify that you don't have multiple versions of React installed, which can cause this error.","cause":"Attempting to use `useState` (or other React Hooks) outside of a functional React component or a custom Hook, or due to multiple React instances.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a functional component."}],"ecosystem":"npm"}