my-phone-input-library

A reusable React component for phone number input with country code selection. It provides a user-friendly interface for selecting country codes and entering phone numbers, with built-in validation and country flag display.

Features

• Country code selection with flags
• Phone number input with validation
• Customizable labels and validation messages
• Uses react-bootstrap-typeahead for country selection
• Easily integrates into any React project

Installation

npm install my-phone-input-library

Peer dependencies required:

• react (v17, v18, or v19)
• react-dom (v17, v18, or v19)

Usage

import { PhoneInputWithCountrySelectList } from "my-phone-input-library";

<PhoneInputWithCountrySelectList
  countryFieldId="country"
  phoneFieldId="phone"
  label="Phone Number"
  required={true}
  countryPlaceholder="Select country"
  placeholder="Enter phone number"
  value={{ countryCode: "+91", phone: "" }}
  onChange={({ countryCode, phone }) => {
    // handle change
  }}
  validationMessages={{
    phoneRequired: "Phone is required",
    countryRequired: "Country is required",
  }}
/>;

API

<PhoneInputWithCountrySelectList /> Props

• countryFieldId (string): Unique ID for the country select input
• phoneFieldId (string): Unique ID for the phone input
• label (string, optional): Label for the input
• placeholder (string, optional): Placeholder for the phone input
• countryPlaceholder (string, optional): Placeholder for the country select input
• required (boolean, optional): Whether the input is required. If true, a red asterisk will appear on the label.
• disabled (boolean, optional): Disable the input
• value (object, optional): { countryCode?: string; phone?: string }
• onChange (function): Callback when value changes
• validationMessages (object, optional): Custom validation messages

Styling

The component uses its own CSS (styles.css) and also imports styles from react-bootstrap-typeahead. You can override styles as needed.

Required label styling:

When the required prop is true, the label will display a red asterisk using the .required CSS class:

.required::after {
  content: "*";
  position: relative;
  font-size: inherit;
  color: #dc3545;
  padding-left: 0.25rem;
  font-weight: bold;
}

Build

To build the library:

npm run build

License

MIT