React SDK

This guide covers how to implement the Telnyx React SDK including client initialization, the phone component, and a sample React application.

As a prerequisite that will help you to set up a Telnyx account and WebRTC client please go to the WebRTC quickstart.

Client initialization

The React SDK can be added to your application by installing it using npm package:

npm install --save @telnyx/react-client @telnyx/webrtc

In a TelnyxRTCProvider component you can pass credentials and options objects with custom ringtones:

// App.jsx
import { TelnyxRTCProvider } from '@telnyx/react-client';

function App() {
  const credential = {
    login_token: 'mytoken',
  };

 const options = {
   ringtoneFile: "./ringtone.mp3",
   ringbackFile: "./ringback.mp3",
 };

  return (
    <TelnyxRTCProvider credential={credential} options={options}>
      <Phone />
    </TelnyxRTCProvider>
  );
}

Phone component

In the Phone component, you would subscribe to the notifications from WebRTC client, specify callbacks for Telnyx client event handlers, and define an Audio element.

First, import the React client:

import {
 useNotification,
 Audio,
 useCallbacks,
} from "@telnyx/react-client"

Define a Phone function component where you will manage event handlers using callbacks and control audio stream in <Audio> element:

const Phone = () => {
const notification = useNotification();
const activeCall = notification && notification.call;

useCallbacks({
   onReady: (status) => {
     console.log("WebRTC client ready");
     console.log(status);
   },
   onError: (error) => {
     console.log("WebRTC client error");
     console.error(error);
   },
   onSocketError: (error) => {
     console.log("WebRTC client socket error");
     console.error(error);
   },
   onSocketClose: () => {
     console.log("WebRTC client socket closed");
   },
   onNotification: (message) => {
     console.log("WebRTC client notification:", message);
     if (message.type === "callUpdate") {
       const call = message.call;
       console.log("Call state:", call.state);
     }
   },
 });

 return (
   <div>
     <Audio stream={activeCall && activeCall.remoteStream} />
   </div>
 );
};

Sample React App

Please refer to our sample React application to check a full implementation of Telnyx Voice SDK with a React component.