React Chat Tutorial

The easiest way to build a Stream Chat React JS application from this tutorial is to create a new project using create-react-app (CRA). CRA builds a boilerplate React application that you can run locally with just a few simple commands.

Before you start: Make sure you've installed Homebrew and the most recent versions of Node.js and Yarn.

To install Homebrew, from your terminal run the following command:

To install Node and Yarn:

If not already installed, globally add CRA:

Next, create a new React project called chat-example:

Stream's React Chat messaging SDK component library includes everything you need to build a fully functioning chat experience, with support for rich messages, reactions, threads, image uploads, videos, and more. This library was designed to enable you to get an application up and running quickly and efficiently while supporting customization for complex use cases.

We’ve included a few Stream React Chat examples to show you what’s possible:

• Basic Chat Components Example
• ChannelList Example
• Customizable UI Components Example
• Custom Attachment Component Example

Build a Basic Chat App with Stream’s Core React Components

In the sample below, you’ll find the following basic chat components in the React JS library:

• Chat
• Channel
• ChannelHeader
• MessageInput
• MessageList
• Thread
• Window

To get started:

1. Replace the code in src/App.js with the snippet below.
2. In your terminal, run yarn start to launch the chat application.

The Chat and Channel components are React context providers that pass a variety of values to their children, including UI components, channel state data, and messaging functions.

Note how you create a channel with the channel method available on the StreamChat client instance. The first argument is the channel type ‘messaging’; the second argument is optional and specifies either the channel ID or custom ID.

The channel type determines the enabled features and permissions associated with this channel. The channel ID is a unique reference to this specific channel.

Once you have the app running, you’ll notice the following out-of-the-box features:

• User online presence
• Typing indicators
• Message status indicators (sending, received)
• User role configuration
• Emoji support
• Message read indicators
• Threading and message replies
• Message reactions
• URL previews (send a YouTube link to see this in action)
• File uploads and previews
• Video playback
• Autocomplete-enabled search on users, emojis, and commands
• Slash commands such as /giphy and /imgur (custom commands are also supported)
• AI-powered spam and profanity moderation

The next example will show you how to render a list of channels using the ChannelList component. In this example, you’ll:

1. Filter your channel query by the messaging type and only return channels where the connected user is a member.
2. Refactor the websocket connection logic to better handle potential race conditions and prevent your app from attempting to load an unconnected client instance (the connectUser method on the StreamChat client istance is asynchronous).
3. Add the LoadingIndicator component, which will render a loading spinner until the StreamChat client instance sets.

Update src/App.js with the following code:

While all of the React JS components in the library render with default styling, you can also pass via props your own custom UI components to adjust the look and feel of your app to meet your design specifications.

In the below example, you’ll create custom ChannelPreview and Message components.

Update src/App.js with the following code:

In this last example, you’ll create a custom Attachment component that renders a different UI if the attachment is of type product.

To see this functionality in action, you’ll:

1. Set up your app to automatically send a message with a custom attachment on mount.
2. Make a query to fetch the created channel after the user connects.
3. Send a message with the product attachment included. The custom Attachment component will then render in the MessageList.

Update src/App.js with the following code:

For more information:

• Read the React SDK Overview documentation.
• If you want to build a more complex chat application, review Stream’s API documentation.

For the next example, you’ll customize the original code snippet to work well for a livestream style chat application. In livestream apps, the user interface tends to be more compact and message seen/read states can get noisy as volume increases.

For this reason, we've changed the channel type. You'll use the VirtualizedMessageList component, which handles list virtualization out-of-the-box and manages memory build-up.

Update src/App.js with the following code to see a simple livestream example:

There are a few important differences compared to the first example:

• You're using the livestream channel type, which disables typing events and seen/read states.
• You set the theme to livestream dark, which enables dark mode for the livestream channel type.
• You're using the VirtualizedMessageList component, which supports the high message volume unique to livestream events.
• You're using the MessageInputSmall UI component in our MessageList, which is a slimmed down version of Stream's standard input that still supports emojis and other text input features.

As a next step, check out the GetStream React examples source code for the chat demos on Stream’s website. Here, you can view more detailed integrations and complex use-cases involving Stream's React components.