use plugin International Telephone Input in react

Question

I'm very new to react and I just want to use this https://github.com/jackocnr/intl-tel-input plugin in my form. But in the documentation says to use pure js input id query selector to use plugin. But how can I change this kind of code to react usage.

code example in doc:

<input type="tel" id="phone">
<script src="path/to/intlTelInput.js"></script>
<script>
  var input = document.querySelector("#phone");
  window.intlTelInput(input);
</script>

check out [refs](https://reactjs.org/docs/refs-and-the-dom.html) in react — Agney, Aug 07 '19 at 09:40
@BoyWithSilverWings but how to use window.intlTelInput(input) using refs — Adam, Aug 07 '19 at 09:44
The ref will give you the DOM node to call the intlTelInput on. You'll like want to do that call in componentDidMount and/or componentDidUpdate. — tenor528, Aug 07 '19 at 09:49

score 3 · Accepted Answer · answered Aug 07 '19 at 09:53

You should avoid to use Jquery in React projects. You can do it React way.

For intl-tel-input, there is react-intl-tel-input and react-intl-tel-input-v2 packages are available.

import ReactIntlTelInput from 'react-intl-tel-input-v2';
import 'intl-tel-input/build/css/intlTelInput.css';


<ReactIntlTelInput
    value={this.state.value}
    onChange={this.onChange}
/>

Demo

score 2 · Answer 2 · answered Aug 07 '19 at 09:59

It's not a good idea to manipulate the DOM manually since react creates a virtual DOM for performance issues

React creates a tree of custom objects representing a part of the DOM. For example, instead of creating an actual DIV element containing a UL element, it creates a React.div object that contains a React.ul object. It can manipulate these objects very quickly without actually touching the real DOM or going through the DOM API. Then, when it renders a component, it uses this virtual DOM to figure out what it needs to do with the real DOM to get the two trees to match.

You can think of the virtual DOM like a blueprint. It contains all the details needed to construct the DOM, but because it doesn't require all the heavyweight parts that go into a real DOM, it can be created and changed much more easily.

source

There's a lot of "ready-made" react components that you can use. You can use react-phone-number-input for example like this:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";

import "./styles.css";

function App() {
  const [inputValue, setInputValue] = useState("");

  return (
    <div className="App">
      <h1>International phone number</h1>
      <PhoneInput
        placeholder="Enter phone number"
        value={inputValue}
        onChange={inputValue => setInputValue(inputValue)}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Take a look at codesandbox

If you want to learn more about how React manipulates the DOM, you can read this article.

Thank-you for the answer, react-phone-number-input does the job. Except that it does not auto-detect the location. The original intl tel input has that functionality of geo ip lookup. Do you know any workaround for this ? — Geo Mukkath, Nov 16 '22 at 06:04

use plugin International Telephone Input in react

2 Answers2