React quickstart

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

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

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

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

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