import { RealtimeChat } from "@outspeed/react";


export function ChatContainer() {
  const { dataChannel } = props

  if (!dataChannel) return null

  return (
    <div>
      <RealtimeChat dataChannel={dataChannel} />
    </div>
  );
}

import { RealtimeChat } from "@outspeed/react";


export function ChatContainer() {
  const { dataChannel } = props

  if (!dataChannel) return null

  return (
    <div>
      <RealtimeChat dataChannel={dataChannel} />
    </div>
  );
}
All of our components are built using Tailwind CSS. Make sure to set it up correctly by following the guide available here.

RealtimeChat is a chat interface that utilizes dataChannel to send and receive messages to and from the backend. It keeps a record of all messages exchanged.

​
Props

​
dataChannel
DataChannel<unknown>

WebRTC or WebSocket data channel.

​
Resources

RealtimeChat

Explore the <RealtimeChat /> code on GitHub to learn how to create your own chat component.

Was this page helpful?

RealtimeVideoUsage