@telnyx/react-client

React wrapper for Telnyx Client

Install

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

Usage example

1// App.jsx
2import { TelnyxRTCProvider } from '@telnyx/react-client';
3
4function App() {
5  const credential = {
6    login_token: 'mytoken',
7  };
8
9  return (
10    <TelnyxRTCProvider credential={credential}>
11      <Phone />
12    </TelnyxRTCProvider>
13  );
14}

1// Phone.jsx
2import { useNotification, Audio } from '@telnyx/react-client';
3
4function Phone() {
5  const notification = useNotification();
6  const activeCall = notification && notification.call;
7
8  return (
9    <div>
10      {activeCall &&
11        activeCall.state === 'ringing' &&
12        'You have an incoming call.'}
13
14      <Audio stream={activeCall && activeCall.remoteStream} />
15    </div>
16  );
17}

Hooks

useCallbacks

1import { useCallbacks } from '@telnyx/react-client';
2
3function Phone() {
4  useCallbacks({
5    onReady: () => console.log('client ready'),
6    onError: () => console.log('client registration error'),
7    onSocketError: () => console.log('client socket error'),
8    onSocketClose: () => console.log('client disconnected'),
9    onNotification: (x) => console.log('received notification:', x),
10  });
11
12  // ...
13}

useTelnyxRTC

If you need more fine-tuned control over TelnyxRTC, you also have access to useTelnyxRTC directly.

1import { useTelnyxRTC } from '@telnyx/react-client';
2
3function Phone() {
4  const client = useTelnyxRTC({ login_token: 'mytoken' });
5
6  client.on('telnyx.ready', () => {
7    console.log('client ready');
8  });
9
10  // ...
11}

Take care to use this hook only once in your application. For most cases, we recommend you use TelnyxRTCContext/TelnyxRTCProvider instead of this hook directly. This ensures that you only have one Telnyx client instance running at a time.

useContext with TelnyxRTCContext

You can retrieve the current TelnyxRTC context value by using React's useContext hook, as an alternative to TelnyxRTCContext.Consumer.

1import React, { useContext } from 'react';
2import { TelnyxRTCContext } from '@telnyx/react-client';
3
4function Phone() {
5  const client = useContext(TelnyxRTCContext);
6
7  client.on('telnyx.ready', () => {
8    console.log('client ready');
9  });
10
11  // ...
12}

Components

TelnyxRTCContextProvider

1import { TelnyxRTCProvider } from '@telnyx/react-client';
2
3function App() {
4  const credential = {
5    // You can either use your On-Demand Credential token
6    // or your Telnyx SIP username and password
7    // login_token: 'mytoken',
8    login: 'myusername',
9    password: 'mypassword',
10  };
11
12  const options = {
13    ringtoneFile: 'https://example.com/sounds/incoming_call.mp3',
14    ringbackFile: 'https://example.com/sounds/ringback_tone.mp3',
15  };
16
17  return (
18    <TelnyxRTCProvider credential={credential} options={options}>
19      <Phone />
20    </TelnyxRTCProvider>
21  );
22}

TelnyxRTCContext.Consumer

1import { TelnyxRTCContext } from '@telnyx/react-client';
2
3function PhoneWrapper() {
4  return (
5    <TelnyxRTCContext.Consumer>
6      {(context) => <Phone client={context} />}
7    </TelnyxRTCContext.Consumer>
8  );
9}

Audio

1import { Audio } from '@telnyx/react-client';
2
3function Phone({ activeCall }) {
4  return (
5    <div>
6      <Audio stream={activeCall.remoteStream} />
7    </div>
8  );
9}

Video

1import { Video } from '@telnyx/react-client';
2
3function VideoConference({ activeCall }) {
4  return (
5    <div>
6      <Video stream={activeCall.localStream} muted />
7      <Video stream={activeCall.remoteStream} />
8    </div>
9  );
10}

Development

Install dependencies:

1yarn install
2yarn start
3yarn link
4
5# in another tab:
6git clone https://github.com/team-telnyx/webrtc-examples/tree/main/react-client/react-app
7
8# fill in .env
9yarn install
10yarn link @telnyx/react-client
11yarn start

---

Contributing

See Contribution Guide

License

MIT © Telnyx