Research
Security News
Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
@telnyx/react-client
Advanced tools
React wrapper for Telnyx Client
npm install --save @telnyx/react-client @telnyx/webrtc
// App.jsx
import { TelnyxRTCProvider } from '@telnyx/react-client';
function App() {
const credential = {
login_token: 'mytoken',
};
return (
<TelnyxRTCProvider credential={credential}>
<Phone />
</TelnyxRTCProvider>
);
}
// Phone.jsx
import { useNotification, Audio } from '@telnyx/react-client';
function Phone() {
const notification = useNotification();
const activeCall = notification && notification.call;
return (
<div>
{activeCall &&
activeCall.state === 'ringing' &&
'You have an incoming call.'}
<Audio stream={activeCall && activeCall.remoteStream} />
</div>
);
}
useCallbacks
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),
});
// ...
}
useTelnyxRTC
If you need more fine-tuned control over TelnyxRTC, you also have access to useTelnyxRTC
directly.
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.
useContext
with TelnyxRTCContext
You can retrieve the current TelnyxRTC context value by using React's useContext
hook, as an alternative to TelnyxRTCContext.Consumer.
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');
});
// ...
}
TelnyxRTCContextProvider
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 (
<TelnyxRTCProvider credential={credential} options={options}>
<Phone />
</TelnyxRTCProvider>
);
}
TelnyxRTCContext.Consumer
import { TelnyxRTCContext } from '@telnyx/react-client';
function PhoneWrapper() {
return (
<TelnyxRTCContext.Consumer>
{(context) => <Phone client={context} />}
</TelnyxRTCContext.Consumer>
);
}
Audio
import { Audio } from '@telnyx/react-client';
function Phone({ activeCall }) {
return (
<div>
<Audio stream={activeCall.remoteStream} />
</div>
);
}
Video
import { Video } from '@telnyx/react-client';
function VideoConference({ activeCall }) {
return (
<div>
<Video stream={activeCall.localStream} muted />
<Video stream={activeCall.remoteStream} />
</div>
);
}
Install dependencies:
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
FAQs
React wrapper for Telnyx Client
The npm package @telnyx/react-client receives a total of 250 weekly downloads. As such, @telnyx/react-client popularity was classified as not popular.
We found that @telnyx/react-client demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.