Twillio Script tags in React component

Question

Im trying to use the Twilio script tag for an international country list dropdown and I am following this twillio guide to do so. However, I got to a point where it is showing a step where I have to include a script in the html file( for me it is index.html which is react's root file) and use the element from the window object.

Here is the snippet in the guide:

The issue here is that this guide was made with regular html,css, and javascript in mind and not with React/JSX files in mind. Is there any way I can handle this in a react file? Here is the doc in case you guys need to take a look. Thanks!

https://www.twilio.com/blog/international-phone-number-input-html-javascript

Answer 1

Twilio developer evangelist here.

The intl-tel-input project was initially built for jQuery, though no longer depends on it. So it wasn't really written for React, though it might be possible to integrate it with some work.

However, there is a project that has reimplemented the intl-tel-input in React, it's called react-intl-tel-input and might be the thing you are looking for.

You can install it with

npm install react-intl-tel-input

And use it in your React project by importing the component and its CSS:

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

Then using the <IntlTelInput> component:

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

See the npm project page for more details.