Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gatteo/react-jitsi
React and Typescript component to include Jitsi Meet with ease
https://github.com/gatteo/react-jitsi
conference jitsi jitsi-meet jitsi-react jitsi-typescript react react-jitsi typescript video-conferencing
Last synced: 3 months ago
JSON representation
React and Typescript component to include Jitsi Meet with ease
- Host: GitHub
- URL: https://github.com/gatteo/react-jitsi
- Owner: gatteo
- License: mit
- Created: 2020-04-05T18:47:58.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T11:19:19.000Z (almost 2 years ago)
- Last Synced: 2024-08-19T07:51:24.908Z (4 months ago)
- Topics: conference, jitsi, jitsi-meet, jitsi-react, jitsi-typescript, react, react-jitsi, typescript, video-conferencing
- Language: TypeScript
- Size: 1.66 MB
- Stars: 108
- Watchers: 5
- Forks: 39
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Jitsi Meet React Component
[](./LICENSE)
[](https://www.typescriptlang.org/)
An **_unofficial_** React component which wraps the standard [Jitsi Meet JS API](https://github.com/jitsi/jitsi-meet/blob/master/doc/api.md).
It is written in Typescript to help you configure the library with ease, and get _your super important meetings_ up and going, in a blink of an eye🌪.
> ## [Live Demo](https://gatteo.github.io/react-jitsi/)
### Install
```bash
npm install react-jitsi --save
```
## Usage
### Basic
The easiest way for you to create a meeting is by simply including the React Jitsi component in your app.
```jsx
import React, { useState } from 'react'
import Jitsi from 'react-jitsi'
export const App = () => (
<>
My First Meeting!
>
)
```
> However, this is **not recommended**, as it will create and join a random room (ex. `hp6y791054a`), which is possibly not unique.
### Basic, but better
We advise you to create a meeting specifying at least a room name (that you know is unique) and the user's display name.
```jsx
import React, { useState } from 'react'
import Jitsi from 'react-jitsi'
const roomName = 'my-super-secret-meeting-123e4567-e89b-12d3-a456-426655440000'
const userFullName = 'Joseph Strawberry'
export const App = () => (
<>
My First Meeting!
>
)
```
### A more complete example
```jsx
import React, { useState } from 'react'
import Jitsi from 'react-jitsi'
import Loader from './components/Loader'
export const App = () => {
const [displayName, setDisplayName] = useState('')
const [roomName, setRoomName] = useState('')
const [password, setPassword] = useState('')
const [onCall, setOnCall] = useState(false)
return onCall
? (
console.log('Good Morning everyone!')}
/>)
: (
<>
Create a Meeting
setRoomName(e.target.value)} />
setDisplayName(e.target.value)} />
setOnCall(true)}> Let's start!
>
)
}
```
## Custom styles
The Jitsi Meet conference iframe is wrapped by two containers
```jsx
```
You can specify custom styles for each container in two ways:
- Using CSS, through the `#react-jitsi-container` and `#react-jitsi-frame` selectors
- Using inline styling, through the `containerStyle` and `frameStyle` props
For example
```jsx
```
## Conference Configuration
Configuration over both the conference [core settings](https://github.com/jitsi/jitsi-meet/blob/master/config.js) (such as `startAudioOnly` option) and the [interface settings](https://github.com/jitsi/jitsi-meet/blob/master/interface_config.js) (such as `filmStripOnly` option) can be passed through the `config` and `interfaceConfig` props.
For example
```jsx
```
## Available props
| Prop | Required | Description | Default |
| ---------------- | -------- | ------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| containerStyle | no | Object containing main container styles (see above for details) | `{ width:'800px', height: '400px' }` |
| frameStyle | no | Object containing frame container styles (see above for details) | `{ display: loading?'none' : 'block',width: '100%',height: '100% }'` |
| loadingComponent | no | Component shown until the Jitsi Meet video conference is not started | `
Loading meeting...` |
| onAPILoad | no | Callback function invoked with Jitsi Meet API object when the library is loaded |
| onIframeLoad | no | Callback function invoked when the conference iframe is loaded |
| domain | no | Domain used to build the conference URL | meet.jit.si |
| roomName | no | Name of the room to join | A random string |
| password | no | Password to set for the meeting room |
| displayName | no | Participant's name |
| config | no | Overrides for the default meeting settings |
| interfaceConfig | no | Overrides for default meeting interface options |
| noSSL | no | Boolean indicating if the server should be contacted using HTTP or HTTPS | true |
| jwt | no | JWT token to pass to the domain |
| devices | no | A map containing information about the initial devices that will be used in the call. |
| userInfo | no | Object containing information about the participant opening the meeting |
## Controlling the Conference
The Jitsi Meet API exposes [several methods](https://github.com/jitsi/jitsi-meet/blob/master/doc/api.md#controlling-the-embedded-jitsi-meet-conference) which allow great control over the conference. Such methods can be accessed through the `api` object passed as an argument to the callback specified in the `onAPILoad` prop.
For example, to retrieve the device list:
```jsx
import React, { useState } from 'react'
import Jitsi from 'react-jitsi'
const handleAPI = (JitsiMeetAPI) => {
JitsiMeetAPI.executeCommand('toggleVideo')
}
export const App = () => (
<>
My First Meeting!
>
)
```
## Contributing
We love contributions from everyone.
If you have any bug to report, open an issue.
If want to submit a fix, or any kind of improvement, create a pull request here on Github.
## Organizations and projects using this component
| | |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [
Dascuola.it
](https://dascuola.it/) | [
Westudents.it
](https://westudents.it/) |
If you are using this component in your organization/project and would like to be shown in the above list, [send us an email](mailto:[email protected])!
---
[MIT License.](./LICENSE)