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>

Answer 1

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

Answer 2

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.