Setting up Twilio client in React using npm

A Twilio device is an object that enables you to programmatically make calls and receiving incoming calls in your app using the Twilio API. Typically, the Twilio client JS SDK is the way to go for vanilla JavaScript applications. However, you can more easily set up your Twilio device using a npm module.

With that said, this article walks you through how to successfully initiate your Twilio Device in React. To keep this article focused, only the code specific to setting up a Twilio device will be included and not the complete code for a functioning React component

Let’s get started

First, install the twilio-client npm module

npm install twilio-client

Next, import it into your React component as follows

import { Device } from "twilio-client";

Assuming you are using React hooks, the next step is to set up the device in your useEffect hook by instantiating a new Device as shown in the code snippet below

import React from "react";
import { Device } from "twilio-client";

const YourComponent = () => {
  useEffect(() => {
    const device = new Device();
    device.on("ready", (device) => {
      // This is a listenner that fires when your device is ready
    });

    device.on("connect", (connection) => {
      // This is a listener that fires when your device is connected to a phone call
    });

    device.on("disconnect", (connection) => {
      // This is a listener that fires when your device is disconnected from a phone call
    });
  }, []);
};

export default YourComponent;

Notice that you can also set various listeners on the device to fire off when different events occur. These event listens can be useful for updating a state variable that displays the status of a phone call. For example, you can have a state variable that displays a status message in the UI that a call is active when the device.on.(“connect”) handler fires. Twilio’s documentation contains a https://www.twilio.com/docs/voice/client/javascript/device#events you can also listen for.

To take this a step further, you may also need to use this device to make an outbound call. To do so, you can save the device in a state variable so that you can access it in other parts of your component. Let’s update the code snippet above with the useState hook and assign it to a state variable

import React, { useState } from "react";
import { Device } from "twilio-client";

const YourComponent = () => {
  const [device, setDevice] = useState(null);

  useEffect(() => {
    const device = new Device();
    setDevice(device);

    device.on("ready", (device) => {});

    device.on("connect", (connection) => {});

    device.on("disconnect", (connection) => {});
  }, []);
};

export default YourComponent;

Now, with the Twilio device set to a state variable, you can use it in other parts of the component. For example, you may want to call device.connect() to initiate an outbound call or device.disconnectAll() to hang up an active call.