npmpackage.info

Gathering detailed insights and metrics for @telnyx/react-client

@telnyx/react-client

SDK for Telnyx's WebRTC platform

1.0.2

MIT

TypeScript

898.00 B

49,242 4.4

Installations

npm install @telnyx/react-client

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=14.x

Node Version

14.21.3

NPM Version

6.14.18 Pull Requests

Open

1

Total

395

Closed

42

Merged

352

Issues

Open

0

Total

35

Closed

35

Releases

102

webrtc@2.22.12

webrtc/v2.22.12

Updated on May 20, 2025

webrtc@2.22.11

webrtc/v2.22.11

Updated on May 14, 2025

webrtc@2.22.10

webrtc/v2.22.10

Updated on May 09, 2025

webrtc@2.22.9

webrtc/v2.22.9

Updated on Apr 15, 2025

webrtc@2.22.8

webrtc/v2.22.8

Updated on Mar 28, 2025

webrtc@2.22.7

webrtc/v2.22.7

Updated on Mar 06, 2025

View All 102 releases

Languages

TypeScript

JavaScript

CSS

Shell

TypeScript (99.34%)

JavaScript (0.59%)

CSS (0.04%)

Shell (0.02%)

Developer

team-telnyx

Download Statistics

Total Downloads

49,242

Last Day

Last Week

1,502

Last Month

5,748

Last Year

28,895

GitHub Statistics

MIT License

44 Stars

690 Commits

21 Forks

9 Watchers

28 Branches

19 Contributors

Updated on Jun 05, 2025

Bundle Size

2.37 kB

Minified

898.00 B

Minified + Gzipped

Bundlephobia

Maintainers

View All 19 Contributors

Package Meta Information

Latest Version

1.0.2

Package Id

@telnyx/react-client@1.0.2

Unpacked Size

63.29 kB

Size

10.79 kB

File Count

NPM Version

6.14.18

Node Version

14.21.3

Published on

Nov 17, 2023

Total Downloads

Cumulative downloads

Total Downloads

49,242

Last Day

184.6%

Compared to previous day

Last Week

23.2%

1,502

Compared to previous week

Last Month

20.4%

5,748

Compared to previous month

Last Year

289.1%

28,895

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

@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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Maintained

Determines if the project is "actively maintained".

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/draft-release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/draft-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/draft-release.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/draft-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-gh-pages.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/publish-gh-pages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-gh-pages.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/publish-gh-pages.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-gh-pages.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/publish-gh-pages.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-release.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/publish-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-release.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/publish-release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-release.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/publish-release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-release.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/publish-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-release.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/publish-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-release.yml:95: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/publish-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/update-changelog.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/update-changelog.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/webrtc-cdn-deploy.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/webrtc-cdn-deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/webrtc-cdn-deploy.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/webrtc-cdn-deploy.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/webrtc-cdn-deploy.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/webrtc-cdn-deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/webrtc-test-release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/webrtc-test-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/webrtc-test-release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/webrtc-test-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/webrtc-test-release.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/webrtc-test-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/webrtc-test-release.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/team-telnyx/webrtc/webrtc-test-release.yml/main?enable=pin
Info: 0 out of 15 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.4

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@telnyx/react-client - 1.0.2 | npmpackage.info

@telnyx/react-client

Installations

Developer Guide

Yes

CommonJS

>=14.x

14.21.3

6.14.18

Pull Requests

1

395

42

352

Issues

0

35

35

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

2.37 kB

898.00 B

Maintainers

Package Meta Information

Total Downloads

49,242

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

@telnyx/react-client

Install

Usage example

Hooks

useCallbacks

useTelnyxRTC

useContext with TelnyxRTCContext

Components

TelnyxRTCContextProvider

TelnyxRTCContext.Consumer

Audio

Video

Development

Contributing

License

10

10

10

10

6

0

0

0

0

0

0

0

4.4

/10

`useCallbacks`

`useTelnyxRTC`

`useContext` with `TelnyxRTCContext`

`TelnyxRTCContextProvider`

`TelnyxRTCContext.Consumer`

`Audio`

`Video`