Socket
Socket
Sign inDemoInstall

react-phone-number-input

Package Overview
Dependencies
Maintainers
1
Versions
359
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-phone-number-input

Telephone number input React component


Version published
Maintainers
1
Created

What is react-phone-number-input?

The react-phone-number-input package is a React component for phone number input that provides a user-friendly interface for entering and validating phone numbers. It supports international phone numbers and offers various customization options.

What are react-phone-number-input's main functionalities?

Basic Phone Number Input

This feature allows you to create a basic phone number input field. The user can enter their phone number, and the component will handle the formatting and validation.

import React from 'react';
import PhoneInput from 'react-phone-number-input';
import 'react-phone-number-input/style.css';

function App() {
  const [value, setValue] = React.useState();
  return (
    <PhoneInput
      placeholder="Enter phone number"
      value={value}
      onChange={setValue}
    />
  );
}

export default App;

International Phone Number Input

This feature allows you to create an international phone number input field. You can set a default country, and the component will format the phone number according to the selected country's format.

import React from 'react';
import PhoneInput from 'react-phone-number-input';
import 'react-phone-number-input/style.css';

function App() {
  const [value, setValue] = React.useState();
  return (
    <PhoneInput
      international
      defaultCountry="US"
      placeholder="Enter phone number"
      value={value}
      onChange={setValue}
    />
  );
}

export default App;

Custom Country Select

This feature allows you to customize the country select dropdown. You can provide your own custom component for selecting the country, giving you more control over the UI.

import React from 'react';
import PhoneInput, { getCountries, getCountryCallingCode } from 'react-phone-number-input';
import 'react-phone-number-input/style.css';

function App() {
  const [value, setValue] = React.useState();
  return (
    <PhoneInput
      placeholder="Enter phone number"
      value={value}
      onChange={setValue}
      countrySelectComponent={({ value, onChange, labels, ...rest }) => (
        <select
          {...rest}
          value={value}
          onChange={(event) => onChange(event.target.value)}
        >
          {getCountries().map((country) => (
            <option key={country} value={country}>
              {labels[country]} +{getCountryCallingCode(country)}
            </option>
          ))}
        </select>
      )}
    />
  );
}

export default App;

Other packages similar to react-phone-number-input

Keywords

FAQs

Package last updated on 19 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc