Stream Chat React Components

14.0.1 · active · verified Sun Apr 19

Stream Chat React is the official React component library for building real-time chat UIs using the Stream Chat API. The current stable version is 14.0.1, with frequent patch releases and significant major version updates, such as the recent v14.0.0 which introduced a complete visual and architectural refresh. This SDK provides a comprehensive set of UI components for various chat use cases, including livestream, team collaboration, messaging, and customer support, abstracting away much of the complexity of real-time communication. Key differentiators include its deep integration with the Stream Chat backend service, a highly customizable component system, and a robust API for handling chat functionality, making it a powerful tool for developers needing to implement rich chat experiences quickly.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to set up the Stream Chat client, connect a user, join a channel, and render a basic chat UI with message list and input components using `stream-chat-react` v14.

import React, { useEffect, useState } from 'react';
import { StreamChat } from 'stream-chat';
import { Chat, Channel, ChannelHeader, MessageList, MessageInput, Window, LoadingIndicator } from 'stream-chat-react';
import 'stream-chat-react/dist/css/index.css';

const API_KEY = process.env.STREAM_API_KEY ?? '';
const USER_ID = process.env.STREAM_USER_ID ?? 'john-doe';
const USER_TOKEN = process.env.STREAM_USER_TOKEN ?? 'YOUR_USER_TOKEN'; // Generate this on your backend

const client = StreamChat.getInstance(API_KEY);

function App() {
  const [channel, setChannel] = useState(null);

  useEffect(() => {
    async function initChat() {
      if (!API_KEY || !USER_ID || !USER_TOKEN) {
        console.error('Please provide STREAM_API_KEY, STREAM_USER_ID, and STREAM_USER_TOKEN environment variables.');
        return;
      }
      try {
        await client.connectUser(
          {
            id: USER_ID,
            name: USER_ID,
            image: `https://getstream.io/random_png/?id=${USER_ID}&name=${USER_ID}`,
          },
          USER_TOKEN,
        );

        const newChannel = client.channel('messaging', 'react-chat-demo', {
          name: 'React Chat Tutorial',
          members: [USER_ID, 'other-user-id'], // Add other users you want in the channel
        });
        await newChannel.watch();
        setChannel(newChannel);
      } catch (error) {
        console.error('Failed to connect or join channel:', error);
      }
    }

    initChat();

    return () => {
      client.disconnectUser();
    };
  }, []);

  if (!channel) return <LoadingIndicator />;

  return (
    <Chat client={client} theme='messaging light'>
      <Channel channel={channel}>
        <Window>
          <ChannelHeader />
          <MessageList />
          <MessageInput />
        </Window>
      </Channel>
    </Chat>
  );
}

export default App;

view raw JSON →