Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vic-react-intl-tel-input

flyvictor128MIT7.1.4

Telephone input component. Rewrite intl-tel-input in React.js.

react, react-component, tel, telephone, intl-tel-input, international-telephone-input, phonenumber

readme

Vic-React-Intl-Tel-Input

This is a fork of https://github.com/patw0929/reactintl-tel-input.

Collaborators Wanted!

Due to the long commuting time, I have no much time to maintain this project often. 😣

So If anybody else is willing to take on the work of bug fixes, integrating pull requests, etc. Please let me know. 🙌

I hope we can maintain the project together, and make this project better! 💪

Demo & Examples

To build the examples locally, run:

npm install
npm start

or

yarn
yarn start

Then open localhost:3000 in a browser.

Installation

The easiest way to use react-intl-tel-input is to install it from NPM and include it in your own React build process (using Webpack, etc).

You can also use the standalone build by including dist/main.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

npm install react-intl-tel-input --save

or

yarn add react-intl-tel-input

Usage

import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';

<IntlTelInput
  containerClassName="intl-tel-input"
  inputClassName="form-control"
/>

Development (src and the build process)

NOTE: The source code for the component is in src. A UMD bundle is also built to dist, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run npm start.

If you want to build to the bundle file to dist/ folder, please run:

npm run build

or

yarn run build

Contributing

To contribute to react-intl-tel-input, clone this repo locally and commit your code on a separate branch. Please write tests for your code, and run the linter before opening a pull-request:

npm test
npm run lint

or

yarn test
yarn run lint

Inspired by

International Telephone Input

License

MIT

Copyright (c) 2015-2019.

changelog

Changelog

v7.0.1

Bug fixes

Docs

  • #273: Feature: Introducing storybook for documentation and playground (by @nutboltu)
  • #274: fix(storybook-deploy): Fixed the storybook deployment script in travis (by @nutboltu)
  • #275: Fix: storybook's public path (by @patw0929)
  • #276: Refactor: Removing all unused files and codes for example (by @nutboltu)

v7.0.0

Bug fixes

  • #270: Fixed the issue of pasting number to text input cannot update flag in international mode (by @patw0929)
  • #271: Fixed the CSS prop name issue of styled-component (by @patw0929)

v6.1.1

Bug fixes

Chores

  • #267 - Use createPortal API to implement RootModal (by @patw0929)
  • Added ISSUE_TEMPLATE.md & PULL_REQUEST_TEMPLATE.md

v6.1.0

New features

Bug fixes

  • #254: Fixed issue #253 - Can not import from Node.js since module build upgrade to webpack 4 (by @superhit0)
  • #256: Defined .npmrc to avoid overriding the default npm registry server (by @superhit0)
  • #259: Fixed not update value issue when value is empty string (by @patw0929)

v6.0.0

Breaking changes

New features

  • #248: Analyze bundle size & decrease the size of main.js (by @patw0929)
  • #227: Bumping React version to 16.4.1 & removing deprecated lifecycle events (by @superhit0)
  • #214: Provide fullNumber and isValid when onSelectFlag (by @adrienharnay)
  • #232: npmignore updated with file list (fixed #231) (by @nutboltu)
  • #242: Upgrade webpack, eslint, babel and refine coding style (by @patw0929)
  • #243: Improvement: Utilize @babel/plugin-proposal-class-properties by using class properties in class components (by @tomegz)

Bug fixes

  • #246: Refactor FlagDropDown: Avoid creating functions every time render() is invoked, use class properties instead (by @tomegz)
  • #221: Fix cursor Issue (#205) (by @superhit0)
  • #223: Removed second argument of parseFloat (by @patw0929)
  • #234: Hide country list when click on flag button (by @ilagnev)
  • #241: Fixes #235: Show countrylist when allowDropdown flag is set to true (by @tomegz)

v5.1.0-rc.0

New features

  • #227: Bumping React version to 16.4.1 & removing deprecated lifecycle events (by @superhit0)
  • #214: Provide fullNumber and isValid when onSelectFlag (by @adrienharnay)
  • #232: npmignore updated with file list (fixed #231) (by @nutboltu)
  • #242: Upgrade webpack, eslint, babel and refine coding style (by @patw0929)
  • #243: Improvement: Utilize @babel/plugin-proposal-class-properties by using class properties in class components (by @tomegz)

Bug fixes

v5.0.7

Bug fixes

v5.0.6

Bug fixes

v5.0.5

Bug fixes

  • Fixed #208: issue of dial code shows twice in input (#209 & #210)

v5.0.4

Bug fixes

  • #207: Move Prop-types out of peer dependency. remove proptypes in dist (57a6956 by @dphrag)

v5.0.3

Bug fixes

v5.0.2

Bug fixes

  • #202: Fix runtime error when this.tel is null (e021526 by@adrienharnay)
  • #201: Update placeholder when receiving new placeholder prop (4e9bcaf by @patw0929)

v5.0.1

Bug fixes

v5.0.0

Breaking change

v4.3.4

Bug fixes

v4.3.3

Bug fixes

v4.3.2

Bug fixes

v4.3.1

Bug fixes

  • Changed line that sets countryCode. Now, when CC is invalid, it is set to null and therefor not changed (34b5517 by @darkenvy)

v4.0.1

Bug fixes

v3.7.0

New features

v3.2.0

New features

Bug fixes