You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-phonenr-input

Package Overview
Dependencies
Maintainers
1
Versions
98
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-phonenr-input

An automated and intuitive international and national phone input field


Version published
Weekly downloads
444
increased by2.3%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

React-PhoneNr-Input

NPM license npm

Overview

React-PhoneNr-Input is a simple to use phonenumber input field with country selection, that by default, intuitively guesses the country for- and formats the entered phonenumber

For International phonenumbers a dropdown menu is available to select ya country from.

By passing the prop format='NATIONAL' and a default country e.g. defaultCountry='DE' a simple input field is shown that formats the entered phonenumber with the national format declared by the defaultCountry prop.

All written with less than 300 lines of code

Demo and Examples here

Installation

npm:

npm i -S react-phonenr-input

yarn:

yarn add react-phonenr-input
Props:
NameTypeDefaultDescription
onChange(data: PhoneNumber) => voidrequiredThe function/method that returns the entered phonenumber or phonenumber object
withCountryMetabooleanfalse changes the retuned value into an Object that contains the phonenumber and the country information. eg.:
        {
          phoneNumber: "+49 176 12345678",
          country: {
            name: "Germany (Deutschland)"
            iso2: "DE"
          }
        }
      
classNamestringundefinedAdds a custom class to the Phonenumber Input Field
defaultCountryIsoCodeundefinedSets the default country (use iso alpha-2 country code e.g 'US', 'GB', 'DE')
disabledbooleanfalseDisables the Phonenumber Input Field
formatNumberFormat'INTERNATIONAL'One of: 'INTERNATIONAL', 'NATIONAL'. Sets the format of the entered phonenumber, in case of 'NATIONAL' the defaultCountry must be set
initialValuestringundefinedSets the initial Value of the Phonenumber Input. This is usefull in case you need to set a phonenumber stored for example in a database
placeholderstringundefinedSets the Placeholder text
preferredCountriesIsoCode[]undefinedLets you restrict the country dropdown to a specific list of countries (use iso alpha-2 country code e.g 'US', 'GB', 'DE')
regions"asia" | "europe" | "africa" | "north-africa" | "oceania" | "america" | "carribean" | "south-america" | "ex-ussr" | "european-union" | "middle-east" | "central-america" | "north-america" | Region[]undefinedLets you restrict the country dropdown to a list of countries in the specified regions
In addition to the here listed Props you can pass all other properties that can be used on a normal Html input field
Code example:
import React, { useState } from 'react'
import { PhoneInput, PhoneNumber } from 'react-phonenr-input';

const Example = () => {
  const [value, setValue] = useState<PhoneNumber>('')

  const handleChange = (phoneNumber: PhoneNumber) => {
    // Do something with the phoneNumber
    setValue(phoneNumber)
  }

  return (
    <div>
      <PhoneInput onChange={handleChange}/>
    </div>
  )
}
Optimized for Mobile usage
mobile

Support

If you like the project and want to support my work, you can buy me a coffee :)

paypal

FAQs

Package last updated on 26 Aug 2023

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc