Ak-react-phone-input NPM

ak-react-phone-input

AkPhoneInput is a React component for rendering a phone input field with country code selection. It provides an easy-to-use interface for users to input phone numbers, format them according to selected country codes, and automatically display the country's flag and code.

Installation

To install the ak-react-phone-input package, run the following command:

npm install ak-react-phone-input

yarn add ak-react-phone-input

Usage

Here's an example of how to use the AkPhoneInput component:

import React, { useState } from 'react';
import AkPhoneInput from 'ak-react-phone-input';

const MyComponent = () => {
  const [phone, setPhone] = useState('');

  const handlePhoneChange = (value: string) => {
    setPhone(value);
  };

  return (
    <div>
      <AkPhoneInput onChange={handlePhoneChange} />
      <p>Phone Number: {phone}</p>
    </div>
  );
};

AkPhoneInput Component Documentation

Props

Prop Name	Type	Default	Description
`onChange`	`(value: string) => void`	Required	Callback function that is called whenever the phone number input changes.
`radius`	`number`	`4`	The border radius for the input and dropdown (in pixels).
`variant`	`"default"` or `"filled"`	`"default"`	The variant of the input, either `"default"` or `"filled"`.
`mode`	`"light" or "dark"`	`"light"`	The theme mode for the component, either `"light"` or `"dark"`.
`noShadow`	`boolean`	`false`	Whether the input should have a shadow or not.

Component Internal Behavior

Feature	Description
Country Selection	Users can select a country from a dropdown list, which automatically updates the country code and flag.
Phone Mask	Based on the selected country, the phone number input will be masked in a format appropriate for that country.
Phone Number Formatting	As users input their phone number, it is automatically formatted according to the mask for the selected country.
Responsive Dropdown	The country dropdown opens either upwards or downwards depending on available space in the viewport.

Key Features

Feature	Description
Country Flag and Code	Displays the flag and country code of the selected country, making it easy for users to identify the country.
Searchable Country Dropdown	Users can search through available countries, making it quicker to find the country they need.
Input Masking	Automatically formats phone numbers based on the selected country's phone number format.

Styling Customization

Style	Description
`borderRadius`	Customize the input's corner radius.
`variant`	Choose between a `"default"` or `"filled"` input style.
`mode`	Choose between `"light"` or `"dark"` theme for the component.
`noShadow`	Disable input shadow if set to `true`.

To override the default styles, you can add custom CSS in your project:

.ak-phone-input-main {
  // Your custom styles
}

.ak-phone-input-root {
  // Your custom styles
}

Example

import AkPhoneInput from 'ak-react-phone-input';
import { useState } from 'react';

const MyForm = () => {
  const [phoneNumber, setPhoneNumber] = useState('');

  const handlePhoneChange = (value: string) => {
    setPhoneNumber(value);
  };

  return (
    <div>
      <AkPhoneInput onChange={handlePhoneChange} variant="filled" mode="dark" />
      <p>Selected Phone Number: {phoneNumber}</p>
    </div>
  );
};

export default MyForm;

License

This project is licensed under the MIT License - see the LICENSE file for details.