@telnyx/react-client

> React wrapper for Telnyx Client

 

Install

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

Usage example

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

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

return (



);
}
`

`jsx
// Phone.jsx
import { useNotification, Audio } from '@telnyx/react-client';

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

return (



);
}
`

Hooks

$3

`jsx
import { useCallbacks } from '@telnyx/react-client';

function Phone() {
useCallbacks({
onReady: () => console.log('client ready'),
onError: () => console.log('client registration error'),
onSocketError: () => console.log('client socket error'),
onSocketClose: () => console.log('client disconnected'),
onNotification: (x) => console.log('received notification:', x),
});

// ...
}
`

$3

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

`jsx
import { useTelnyxRTC } from '@telnyx/react-client';

function Phone() {
const client = useTelnyxRTC({ login_token: 'mytoken' });

client.on('telnyx.ready', () => {
console.log('client ready');
});

// ...
}
`

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.

$3

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

`jsx
import React, { useContext } from 'react';
import { TelnyxRTCContext } from '@telnyx/react-client';

function Phone() {
const client = useContext(TelnyxRTCContext);

client.on('telnyx.ready', () => {
console.log('client ready');
});

// ...
}
`

Components

$3

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

function App() {
const credential = {
// You can either use your On-Demand Credential token
// or your Telnyx SIP username and password
// login_token: 'mytoken',
login: 'myusername',
password: 'mypassword',
};

const options = {
ringtoneFile: 'https://example.com/sounds/incoming_call.mp3',
ringbackFile: 'https://example.com/sounds/ringback_tone.mp3',
};

return (



);
}
`

$3

`jsx
import { TelnyxRTCContext } from '@telnyx/react-client';

function PhoneWrapper() {
return (

{(context) => }

);
}
`

$3

`jsx
import { Audio } from '@telnyx/react-client';

function Phone({ activeCall }) {
return (



);
}
`

$3

`jsx
import { Video } from '@telnyx/react-client';

function VideoConference({ activeCall }) {
return (



);
}
`

Development

Install dependencies:

`bash
yarn install
yarn start
yarn link

in another tab:

git clone https://github.com/team-telnyx/webrtc-examples/tree/main/react-client/react-app

fill in .env

yarn install
yarn link @telnyx/react-client
yarn start
``

---

Contributing

See Contribution Guide

License

MIT © Telnyx