{"id":20629549,"url":"https://github.com/catalyst-video/catalyst-react","last_synced_at":"2025-06-17T05:33:28.902Z","repository":{"id":43310444,"uuid":"345459752","full_name":"Catalyst-Video/catalyst-react","owner":"Catalyst-Video","description":"📸💬 Reliable and scalable open-source video chat in a few lines of code","archived":false,"fork":false,"pushed_at":"2022-03-08T22:04:14.000Z","size":25129,"stargazers_count":10,"open_issues_count":10,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-15T18:18:01.581Z","etag":null,"topics":["catalyst","react","video-chat","webrtc"],"latest_commit_sha":null,"homepage":"https://catalyst.chat","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Catalyst-Video.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-07T21:42:54.000Z","updated_at":"2022-03-26T03:37:04.000Z","dependencies_parsed_at":"2022-09-16T05:20:49.309Z","dependency_job_id":null,"html_url":"https://github.com/Catalyst-Video/catalyst-react","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Catalyst-Video%2Fcatalyst-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Catalyst-Video%2Fcatalyst-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Catalyst-Video%2Fcatalyst-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Catalyst-Video%2Fcatalyst-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Catalyst-Video","download_url":"https://codeload.github.com/Catalyst-Video/catalyst-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249125998,"owners_count":21216705,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["catalyst","react","video-chat","webrtc"],"created_at":"2024-11-16T14:05:15.449Z","updated_at":"2025-04-15T18:18:09.478Z","avatar_url":"https://github.com/Catalyst-Video.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Catalyst Video Chat\n\n📷💬 Reliable and scalable open-source video chat in a few lines of code.\n\nCheck out the full [Catalyst documentation](https://docs.catalyst.chat/docs-getting-started)!\n\n## Quick Start\n\n#### Installation\nCatalyst can be installed using either [`npm`](https://www.npmjs.com/package/catalyst-vc-react) or `yarn`\n\n```\nnpm i catalyst-vc-react\n```\n\n#### Importation\n\n```typescript\nimport CatalystChat from \"catalyst-vc-react\"\n```\n#### Implementation\n\n```tsx\n\t\u003cCatalystChat\n\t\t\troom=\"ROOM_NAME\"\n\t\t\tappId=\"YOUR_CATALYST_PROJECT_ID\"\n\t\t\tname=\"MEMBER_NAME\"\n\t\t\tonEndCall={() =\u003e console.log('Call ended!')}\n\t\t/\u003e\n```\n\nYou will need a Catalyst `appId` API key to connect to our servers. This can be obtained in under a minute by visiting the *API keys* tab of our [management portal](https://manage.catalyst.chat/). \n\nOur servers are free for your first 30 monthly active users, which means they should not cost you anything in development (and possibly production)!\n\nWe recommend a minimum parent container size of 400px X 450px.\n\n## Parameters\n\n| Prop        | Description                                                                                                 |  Type                             | Example Value                             | Required |\n| ------------ | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------- | -------------------------------------- | -------- |\n| `room` | Unique session identifier _(peers with the same `room` are connected)_                                                                    |  `string` | `ROOM_NAME` |  Required      |\n| `appId` | Unique project identifier, obtained from the *API keys* tab of our [management portal](https://manage.catalyst.chat/)                                                   |  `string` | `YOUR_CATALYST_PROJECT_ID` |  Required  |\n| `name` | Display name of member joining the call |  `string` | `MEMBER_NAME` |  Optional |\n| `fade` | Milliseconds of no user interaction before fading out controls. Disabled when set to `0`                   |  `number` | `600` | Optional |\n| `audioOffDefault` |Is microphone disabled by default                        |  `boolean` | `true` | Optional |\n| `videoOffDefault` | Is webcam disabled by default               |  `boolean` | `true` | Optional |\n| `theme` | Color scheme. Includes: **primary** _(main color)_, **secondary** _(background color)_, **tertiary** _(button color)_, **quaternary** _(button hover color)_, **quinary** _(text color)_            |  `string` | `{ primary?: string; secondary?: string; tertiary?: string; quaternary?: string; quinary?: string; }` | `default` | Optional |\n| `simulcast` | Publish multiple levels of quality for video streams              |  `boolean` | `true` | Optional |\n| `disableChat` | Hide text chat functionality              |  `boolean` | `true` | Optional |\n| `disableSetupView` | Skip setup view       |  `boolean` | `true` | Optional |\n| `disableNameField` | Hide user name input field in setup view     |  `boolean` | `true` | Optional |\n| `cstmSetupBg` | Gradient or hex-code background for setup view      |  `string` | `#fff` | Optional |\n| `disableRefreshBtn` | Hide refresh button in top settings bar |  `boolean` | `true` | Optional |\n| `cstmWelcomeMsg` | Message displayed when you are the only member in room      |  `string`, `HTMLElement` | `Welcome!` | Optional |\n| `cstmSupportUrl` | Url for all help/support messages. When set to an empty string hides support icon.   |  `string` | `https://catalyst.chat/contact.html` | Optional |\n| `arbData` | Data passed to all other members of room  |  `Uint8Array` | `TextEncoder().encode('str')` | Optional |\n| `handleReceiveArbData` | Function triggered whenever arbitrary data is received    |  `Function` | `(arbData: Uint8Array) =\u003e void` | Optional |\n| `handleUserData` | Function passed all user metadata after token is generated    |  `Function` | `(userData: CatalystUserData) =\u003e void` | Optional |\n| `onJoinCall` | Function triggered when user joins the call  |  `Function` | `() =\u003e void` | Optional |\n| `onMemberJoin` | Function triggered when a member joins the call     |  `Function` | `() =\u003e void` | Optional |\n| `onMemberLeave` | Function triggered when a member leaves the call       |  `Function` | `() =\u003e void` | Optional |\n| `onLeaveCall` | Function triggered when user leaves call       |  `Function` | `() =\u003e void` | Optional |\n\n## Meta\n\nCreated by [@GoldinGuy](https://github.com/GoldinGuy) and [@JoeSemrai](https://github.com/JosephSemrai)\n\nThe master branch of this repository contains Catalyst V3, the [latest version](https://www.npmjs.com/package/catalyst-vc-react). The older V2 version can be found on the [Catalyst V2 Branch](https://github.com/Catalyst-Video/catalyst-react/tree/CatalystV2). \n\nCatalyst is designed with safety and security in mind. Visit our [terms of service and privacy policy](https://catalyst.chat/tos.html) to learn more.\n\nCatalyst V3 is based on a custom version of [WebRTC SFU](https://github.com/pion/ion-sfu) [LiveKit](https://github.com/Catalyst-Video/catalyst-client) infrastructure to allow for more stability and scalability. Prior versions of Catalyst made use of direct P2P protocols.\n\nDistributed under the AGPL-3.0-only license. See [LICENSE](https://github.com/Catalyst-Video/catalyst-react/blob/master/LICENSE) for more information.\n\n\u003c!-- ngrok http 1234 -host-header=”localhost:1234\"  --\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatalyst-video%2Fcatalyst-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatalyst-video%2Fcatalyst-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatalyst-video%2Fcatalyst-react/lists"}