app.tsx

import { useHuddle01 } from '@huddle01/react';
import { useLobby, useAudio, useVideo } from '@huddle01/react/hooks';
 
 
const App = () => {
  const { initialize, isInitialized } = useHuddle01();
  const { joinLobby } = useLobby();
  const { fetchAudioStream, stopAudioStream, error: micError } = useAudio();
  const { fetchVideoStream, stopVideoStream, error: camError } = useVideo();
  // Show error if it exists
 
  useEffect(() => {
    // its preferable to use env vars to store projectId
    initialize('YOUR_PROJECT_ID');
  }, []);
 
  return (
    <div>{isInitialized ? 'Hello World!' : 'Please initialize'}
      <button 
        disabled={joinLobby.isCallable} 
        onClick={() => joinLobby('YOUR_ROOM_ID');
      }>
        Join Lobby
      </button>
 
     {/* Mic */} 
      <button disabled={!fetchAudioStream.isCallable} onClick={fetchAudioStream}>
        FETCH_AUDIO_STREAM
      </button>
 
      {/* Webcam */} 
      <button disabled={!fetchVideoStream.isCallable} onClick={fetchVideoStream}>
        FETCH_VIDEO_STREAM
      </button>
    </div>
  );
};