Learn how to quickly integrate rich Generative AI experiences directly into Stream Chat. Learn More ->

Chat Messaging

React Chat SDK Messaging Components

The Stream Chat React SDK is a rich set of performant, customizable React components. Out of the box, you get everything necessary to build a fully functioning chat user experience: rich message lists, messages, reactions, threads, image and video attachments, and channel previews.

example of react chat sdk
The logo of React
Getting Started

This guide quickly brings you up to speed on Stream’s Chat API. The API is flexible and allows you to build any type of chat or messaging. 

Tutorials

Learn how to quickly build a chat app leveraging Stream's Chat API and the Stream Chat React components. The underlying API is very flexible and allows you to build nearly any type of chat experience.

Sample Apps

Full functional sample apps built on top of our UI Components. Great for previewing features and testing our SDK.

example of react social chat messaging chat demo
React Social Chat Messaging

Build feature rich chat messaging into your app with a familiar social style that will remind you of iMessage, Facebook or Whatsapp.

example of react sdk team chat messaging demo
React Team Chat

Building an app for your team? Need chat as a feature to support other team functionality? Stream’s Team Chat UI is drop-in ready for your project.

Key React Chat SDK Benefits

The React SDK provides straightforward frontend access to all the capabilities of our Chat API infrastructure.

Ready-To-Use React Components

  • Message list
  • Message input
  • Channel list
  • Channel header
  • Threads

Channel List

  • Load channels on demand
  • Last message previews
  • Automatic channel sorting
  • Channel search

Message List UI

  • UI Virtualization
  • Date separators
  • Group messages by user
  • Threading and replies
  • Soft deleted messages

Message Component

  • Avatar
  • Timestamp
  • Reactions
  • Message actions
  • Mentions
  • Markdown support
  • Message editing

Message Input

  • Slash commands support
  • Emoji picker and autocomplete
  • File uploads
  • Image upload previews
  • Autocomplete mentions

Attachments

  • URL previews
  • Giphies
  • Images/image galleries
  • Video attachment player
  • Video links player

Extensible and Customizable

  • Customize with CSS variables
  • Custom component props
  • Custom React hooks

Compliant

  • I18n with with 10+ translations
  • ARIA attributes

Flexibility & Reusability

Set up your UI exactly the way
you want it

Our React SDK Components expose a rich set of customization properties which let you tweak numerous logical and visual aspects. Pass your own custom React component for an avatar, or replace the entire Message component with the one your team needs. We also expose various lifecycle callbacks which let you inject additional logic to be performed when a message is sent.

react sdk features example

Give Developer Feedback

Didn't find what you're looking for? Get in touch with our team to let us know what we can do to help.

Start coding for free

No credit card required.
If you're interested in a custom plan or have any questions, please contact us.