React Chat SDK Messaging Components

Sample Apps

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.

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. Try the 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. Try the demo.

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 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.

Performance

Chat is active, so we've included ways to pay attention to performance with PureComponent.

Internationalisation

Streami18n allows for built-in translations for components across multiple languages.

Begin Tutorial

Contact Us

Hi! We are always busy working on our React SDK here at Stream. Any feedback that other developers can provide will be very helpful.

Would you consider leaving some feedback on what you need from Stream?

Give Developer Feedback

Didn’t find what you’re looking for? Get in touch with our Developer Advocacy team to let us know what we can do to help: