React quickstart

The React SDK can be added to your application by installing the npm packages:

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

Client initialization

In the 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 the 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 the <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

Check out our sample React application for a full implementation of the Telnyx Voice SDK with React components.

​Client initialization

​Phone component

​Sample React app

Client initialization

Phone component

Sample React app