@true-vroom/react

React UI components, hooks, and prefabricated layouts for building real-time audio/video experiences on top of @true-vroom/client-js.

Installation

npm install @true-vroom/react @true-vroom/client-js

Quick start

import { Vroom } from '@true-vroom/client-js'
import { VroomProvider, VideoCall } from '@true-vroom/react'
import '@true-vroom/react/styles'

await Vroom.init({ apiKey: '...' })

function App() {
  return (
    <VroomProvider theme="dark">
      <VideoCall
        connectParams={{
          roomName: 'demo',
          user: { id: 'u1', displayName: 'Me', role: 'member' },
          type: 'p2p',
          media: { audio: true, video: true },
        }}
        chat={true}
        layout="side-by-side"
      />
    </VroomProvider>
  )
}

Features

• Providers — VroomProvider, SessionProvider, ChatProvider
• Hooks — session, participants, tracks, media (mic/camera/devices), services (recording, stats), and chat (useChat, useChatTyping, useChatUnread, useChatModeration, useChatActive)
• Components — track renderers, participant tiles, layouts (Duo), controls (Mic/Camera/Speaker/Disconnect/Chat toggles, ControlBar), indicators (timer, recording, network quality, connection state), and chat (ChatPanel, ChatMessageList, ChatInput, ChatTypingIndicator, ChatMessage)
• Prefabs — drop-in VideoCall 1-on-1 UI with optional chat side-panel (chat={true})
• Themes — dark, light, neutral

Development

Setup

1. Clone this repository and install dependencies with pnpm install.
2. Ensure a local checkout of vroom-sdk-client-js resides alongside this repository. The TypeScript configuration maps @true-vroom/client-js to ../vroom-sdk-client-js/src for development until the SDK is published.

Once @true-vroom/client-js is available on npm, remove the path mapping and install the dependency via:

pnpm add @true-vroom/client-js@^0.1.0 @true-vroom/react

Scripts

• pnpm dev – Watch build for active development.
• pnpm build – Generate production bundles (CommonJS, ESM, and types).
• pnpm lint – Run ESLint across the src directory.
• pnpm typecheck – Verify TypeScript types via tsc --noEmit.
• pnpm test – Execute the unit test suite with Vitest.
• pnpm clean – Remove the dist output directory.

Directory structure

• src/ – Component implementations, hooks, providers, and prefabs exported by the package.
• dist/ – Build artifacts generated by pnpm build (not checked into the repo).
• examples/ – Vite playgrounds that resolve directly to the local source.
• docs/ – Additional design notes and deep-dive documentation (optional reading for contributors).

Examples

Standalone playgrounds live under examples/. See examples/README.md for setup instructions and project details.

Contributing

1. Create a feature branch and ensure your changes pass pnpm lint, pnpm typecheck, and pnpm test.
2. Provide context in your pull request, especially if the change depends on updates in @true-vroom/client-js.
3. Keep documentation up to date when public APIs evolve.

License

This project is licensed under the MIT License. See the LICENSE file (coming soon) for full details.