Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/this-fifo/jutsu
A jitsi meet component wrapper and custom hook moulded with react's chakra ðŸ’
https://github.com/this-fifo/jutsu
conference jitsi jitsi-meet meeting-room react video-conferencing
Last synced: 6 days ago
JSON representation
A jitsi meet component wrapper and custom hook moulded with react's chakra ðŸ’
- Host: GitHub
- URL: https://github.com/this-fifo/jutsu
- Owner: this-fifo
- Created: 2020-03-27T22:58:26.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-31T15:35:14.000Z (about 1 month ago)
- Last Synced: 2024-11-30T17:11:53.185Z (14 days ago)
- Topics: conference, jitsi, jitsi-meet, meeting-room, react, video-conferencing
- Language: JavaScript
- Homepage: https://this-fifo.github.io/jutsu/
- Size: 2.32 MB
- Stars: 153
- Watchers: 5
- Forks: 53
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# <Jutsu />
> A jitsi meet component wrapper and custom hook moulded with react's chakra ðŸ’
[View live demo](https://this-fifo.github.io/jutsu/)
[](https://www.npmjs.com/package/react-jutsu)
## Install
```bash
yarn add react-jutsu
```
## Add the Jitsi Meet API js file to the html body
```html
```
> You can choose to load the script another way, the hook will return an error until the jitsi API is available in `window` scope.
## Two options
> You can use the provided component for simple scenarios or the hook for access to the jitsi meet api
```js
import { Jutsu } from 'react-jutsu' // Component
import { useJitsi } from 'react-jutsu' // Custom hook
```
## Sample Usage (Hook)
```jsx
import React, { useEffect } from 'react'
import { useJitsi } from 'react-jutsu'
const App = () => {
const jitsiConfig = {
roomName: 'konoha',
displayName: 'Naruto Uzumaki',
password: 'dattebayo',
subject: 'fan',
parentNode: 'jitsi-container',
};
const { loading, error, jitsi } = useJitsi(jitsiConfig);
return (
{error && {error}
}
);
}
```
## Sample Usage (Component)
```jsx
import React, { useState } from 'react'
import { Jutsu } from 'react-jutsu'
const App = () => {
const [room, setRoom] = useState('')
const [name, setName] = useState('')
const [call, setCall] = useState(false)
const [password, setPassword] = useState('')
const handleClick = event => {
event.preventDefault()
if (room && name) setCall(true)
}
return call ? (
console.log('Meeting has ended')}
loadingComponent={
loading ...
}
errorComponent={Oops, something went wrong
} />
) : (
setRoom(e.target.value)} />
setName(e.target.value)} />
setPassword(e.target.value)} />
Start / Join
)
}
export default App
```
## Supported Configuration
> Check the [Jitsi Meet API docs](https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe) for full configuration and how to use api commands when using the `useJitsi` hook
### Room Name
The meeting room name
>This prop is required to start a meeting
### Display Name
The participant's displayed name
>This prop is optional
### Password
The meeting room password
>This prop is optional
### onMeetingEnd
Callback function executed after readyToClose event is fired
>This prop is optional
### Subject
The meeting subject (what is displayed at the top)
>This prop is optional
```jsx
console.log('Meeting has ended')}
/>
```
### Domain
```jsx
```
Your Jitsi domain to use, the default value is `meet.jit.si`
### Loading Component
```jsx
}>
```
An optional loading component, the default value is `
Loading ...
`
### Error Component
```jsx
Oops, something went wrong...}>
```
An optional error component, the default value is a `
` containing the error.
### Styles
Internally Jutsu is constructed inside 2 containers, you can add custom styles for each by specifying `containerStyles` and `jitsiContainerstyles`
The default values set as
```jsx
```
An example override could be
```jsx
```
### configOverwrite
Configuration object to overwrite.
>This prop is optional
>More details about possible key/values [here](https://github.com/jitsi/jitsi-meet/blob/master/config.js)
### interfaceConfigOverwrite
Interface configuration object to overwrite.
>This prop is optional
>More details about possible key/values [here](https://github.com/jitsi/jitsi-meet/blob/master/interface_config.js)
### onError
Callback function to be called with an error as the only parameter if any.
>This prop is optional
### onJitsi
Callback function to be called with the jitsi API client when instantiated.
>This prop is optional
### any other prop
Any other prop passed to the component will be passed to jitsi API constructor as part of the `options` parameter.
> For instance: `jwt`, `devices`, `userInfo`
## License
MIT © [this-fifo](https://github.com/this-fifo)