React-phone-input-with-accessibility NPM

React-Phone-Input With Accessibility

react-phone-input-with-accessibility

A React component for phone number input with built-in accessibility support.

animation

Installation

npm install react-phone-input-with-accessibility

yarn add react-phone-input-with-accessibility

Usage

import PhoneInput from 'react-phone-input-with-accessibility'
import 'react-phone-input-with-accessibility/lib/style.css'

<PhoneInput
  country={'us'}
  value={this.state.phone}
  onChange={phone => this.setState({ phone })}
/>

available styles - style • high-res • material • bootstrap • semantic-ui • plain

Options

<PhoneInput
  inputProps={{
    name: 'phone',
    required: true,
    autoFocus: true
  }}
/>

Style
Events
Regions
Localization
Local area codes
Custom masks
Custom area codes

Style

Events

onChange(value, country, e, formattedValue)

Country data object not returns from onKeyDown event

Regions

<PhoneInput
  country='de'
  regions={'europe'}
/>

<PhoneInput
  country='us'
  regions={['north-america', 'carribean']}
/>

Predefined localization

es Spanish, de Deutsch, ru Russian, fr French jp Japanese, cn Chinese, pt Portuguese, it Italian ir Iranian, ar Arabic, tr Turkish, id Indonesian hu Hungarian, pl Polish, ko Korean

import es from 'react-phone-input-with-accessibility/lang/es.json'

<PhoneInput
  localization={es}
/>

Local area codes

<PhoneInput
  enableAreaCodes={true}
  enableAreaCodes={['us', 'ca']}
  enableAreaCodeStretch
/>

Flexible mask

If enableAreaCodeStretch is added, the part of the mask with the area code will not stretch to length of the respective section of phone mask. Example: +61 (2), +61 (02)

Custom masks

<PhoneInput
  onlyCountries={['fr', 'at']}
  masks={{fr: '(...) ..-..-..', at: '(....) ...-....'}}
/>

Custom area codes

<PhoneInput
  onlyCountries={['gr', 'fr', 'us']}
  areaCodes={{gr: ['2694', '2647'], fr: ['369', '463'], us: ['300']}}
/>

Accessibility Support

This component is built with accessibility in mind and can be easily navigated using the keyboard or assistive technologies. It includes proper ARIA attributes and keyboard interaction for a seamless experience for all users.

Make sure you donated for lib maintenance !Donate