International phone number input component for react

Overview

Welcome to react-contact-number-input 👋

Version License: MIT

International phone number input component for react

Install

npm install react-contact-number-input

Author

👤 vaibhav-systango

Usage

You need to import ReactCountryInput from package react-country-input with the props using below-

Code Example:

;">
import { PhoneInput } from "react-contact-number-input";
<PhoneInput
  disabled={disabled}
  containerClass={containerClass}
  countryCode={currentCountryCode}
  onChange={handleOnChange}
  placeholder={placeholder}
/>;

[Demo ] (https://react-contact-number-input.web.app/)

Component Props

Name Type Description
onChange func required, returns the object with the details of the number
countryCode string default value= 'us', selected country phone code.
placeholder string default value= 'Enter Mobile Number' ,change the value of phone input placeholder
containerClass string default value= '' ,change the phone input styling
disabled boolean default value= false ,handles the input to be disabled or not

Notes on Requirements

At least [email protected] is required due to hooks usage in the dependency

You might also like...
React component that handles csv file input and its parsing

react-csv-reader React component that handles csv file input. It handles file input and returns its content as a matrix. Docs: nzambello.github.io/rea

Time-input - A keyboard friendly react component for capturing time

time-input A keyboard friendly react component for capturing time features small UI surface area (just a form input) keyboard friendly (can type times

A fully customizable, one-time password input component for the web built with React

block-code A fully customizable, one-time password input component for the web built with React Live demo Highlights Easy to use Fully customizable Re

A ReactJS component that allows for multiple text field input, built using the FluentUI library
A ReactJS component that allows for multiple text field input, built using the FluentUI library

A ReactJS component that allows for multiple text field input, built using the FluentUI library

A ReactJS input component that manages multiple languages
A ReactJS input component that manages multiple languages

React-translatable-input A ReactJS input component that manages multiple languages. $ npm install --save react-translatable-input Demo http://belkalab

A React Hook & Container to help with payment card input fields.
A React Hook & Container to help with payment card input fields.

React Payment Inputs A React Hook & Container to help with payment card input fields. React Payment Inputs Demos Requirements Installation Usage With

Input mask for React, Angular, Ember, Vue, & plain JavaScript
Input mask for React, Angular, Ember, Vue, & plain JavaScript

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include: https://github.com/uNmAnNeR/imaskjs

Input mask for React, Angular, Ember, Vue, & plain JavaScript
Input mask for React, Angular, Ember, Vue, & plain JavaScript

Text Mask is an input mask library. It can create input masks for phone, date, currency, zip code, percentage, email, and literally anything!

An input of type password implemented with React and TypeScript

An input of type password implemented with React and TypeScript

Comments
  • Could not find a declaration file

    Could not find a declaration file

    hello,

    I've confirmed that I'm using react version 17.0.2 but when I add the import statement I get the following error:

    Could not find a declaration file for module 'react-contact-number-input'. '.../node_modules/react-contact-number-input/dist/index.js' implicitly has an 'any' type.

    opened by nyteryze 0
Owner
Vaibhav Gurnani
Vaibhav Gurnani
React Input Format & Mask, tiny (≈800b) component to transform any input component into formatted or masked input. Supports number, date, phone, currency, credit card, etc

RIFM - React Input Format & Mask Is a tiny (≈ 800b) component (and hook) to transform any input component into formatted or masked input. Demo Highlig

RealAdvisor 1.3k Dec 13, 2022
Headless phone number input component for React. Because phone numbers are hard.

React Headless Phone Input A headless phone number input component built for usability. Phone numbers are hard. Users expect to be able to enter phone

Ben Aubin 26 Nov 16, 2022
Rewrite International Telephone Input in React.js

Rewrite International Telephone Input in React.js. (Looking for maintainers, and PRs & contributors are also welcomed!)

Patrick Wang 273 Nov 24, 2022
A React hook for building phone number inputs

use-telephone A React hook for building phone number inputs Installation use-telephone depends on React >= 16.8, so make sure you have it installed. y

Alistair Smith 16 Sep 15, 2022
React Input Number

rc-input-number Input number control.

react-component 275 Dec 13, 2022
A numpad for number, date and time, built with and for React.

React numpad A numpad for number, date and time, built with and for React. It's written with the extensibility in mind. The idea of this project is to

Pietro Ghezzi 130 Dec 21, 2022
Input masking component for React. Made with attention to UX.

react-input-mask Input masking component for React. Made with attention to UX. This is a development branch for version 3.0. For the latest stable ver

Nikita Lobachev 2.1k Dec 30, 2022
Masked input React component

MaskedInput A React component for input masking, built on top of inputmask-core. Live Demo Install npm npm install react-maskedinput --save Browser

Jonny Buchanan 721 Nov 30, 2022
React Currency Input Field Component

React Currency Input Field Component

Chun 357 Dec 30, 2022
A fully customizable, one-time password input component for the web built with React.

react-otp-input A fully customizable, one-time password input component for the web built with React. Live Demo CodeSandbox Installation To install th

Devfolio 402 Dec 30, 2022