jam-react
Jam is your own embeddable Clubhouse-style audio space. This package exposes Jam as a standalone React component.
yarn add jam-react
Usage:
import Jam from 'jam-react';
<Jam roomId="new-jam-room" />;
<Jam>
supports three props:
-
roomId
- required, string, your room ID which also makes the room accessible by navigating tohttps://jam.systems/<roomId>
. -
jamUrl
- optional, string, URL of the jam instance. The default ishttps://jam.systems
which you may use freely. -
params
- optional, allows many customizations that are documented here.
Any other props, like style
, are merged into the top-level <iframe>
which loads jam. This allows you to add styling, customize iframe
feature policy etc. Note that Jam needs allow="microphone"
to work.
Here is a full example with customizations, including setting an identity for the user from outside:
import React from 'react';
import Jam from 'jam-react';
function App() {
return (
<div style={{padding: '1rem'}}>
<h1>Jam: My own Clubhouse!!!!</h1>
<Jam
jamUrl="http://beta.jam.systems"
roomId="klubhaus-123456"
params={{
room: {
name: 'A new Jam Room',
description: 'This Room was created by a React component',
color: '#000000',
stageOnly: true,
},
ux: {
autoCreate: false,
autoJoin: true,
},
identity: {
name: 'Gregor',
avatar: 'https://avatars.githubusercontent.com/u/20989968',
},
}}
style={{width: '400px', height: '600px', border: 'none'}}
/>
</div>
);
}
And here is an example with three <Jam>
components rendered next to each other:
About Jam
With Jam you can create audio rooms that can be used for panel discussions, jam sessions, free flowing conversations, debates, theatre plays, musicals and more. The only limit is your imagination.
Try Jam on https://jam.systems/
Find out more about Jam at our Gitlab repository.
☕
Buy Us BTC: 3HM1zPtLuwCGarbihNYVjFVwbFrFe9keqh
ETH: 0xe15265b2a309f0d20038e10b8df5a12fb5e916f8