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.

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>
  );
}

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>
 );
};

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