import { VeltHuddle, VeltHuddleTool} from '@veltdev/react';
import {useEffect} from 'react'

export default function App() {

  useEffect(()=>{
    const huddleElement = client.getHuddleElement();
    huddleElement.enableChat();
    huddleElement.disableChat();
    huddleElement.enableFlockModeOnAvatarClick();
    huddleElement.disableFlockModeOnAvatarClick();
  })

  return (
    <VeltHuddle darkMode={true}/> 

    <div className="toolbar">
      <VeltHuddleTool type='audio' /> 
      <VeltHuddleTool type='video' /> 
      <VeltHuddleTool type='screen' /> 
      <VeltHuddleTool type='all' /> 
    </div>
  );
}
1

Enable Audio Only Mode

Sets the mode to audio only mode.

This is the default mode if no type is provided.

<VeltHuddleTool type="audio"/>
2

Enable Video Only Mode

Sets the mode to video only mode.

<VeltHuddleTool type="video"/>
3

Enable Screen Only Mode

Sets the mode to screen only mode.

<VeltHuddleTool type="screen"/>
4

Enable All Modes

Sets the mode to all modes.

<VeltHuddleTool type="all"/>
5

Dark Mode

Whether dark mode is enabled.

Default: false

<VeltHuddle darkMode={true} />
6

Disable Chat Feature

Whether Chat feature is disabled in Huddles.

Default: true

<VeltHuddle chat={false} />

API Methods:

const huddleElement = client.getHuddleElement();
// to enable chat
huddleElement.enableChat();
// to disable chat
huddleElement.disableChat();
7

Enable Flock Mode on Avatar Click

Whether Flock Mode on Avatar Click is enabled in Huddles.

Default: false

<VeltHuddle flockModeOnAvatarClick={true} />

API Methods:

const huddleElement = client.getHuddleElement();
// to enable flock mode on avatar click
huddleElement.enableFlockModeOnAvatarClick();
// to disable flock mode on avatar click
huddleElement.disableFlockModeOnAvatarClick();