React Chat SDK Messaging Components
The React Chat Messaging Component Library includes everything you need to build a fully functioning chat user experience in React with support for rich messages, reactions, threads, image uploads and videos. Get started with the React Chat tutorial.
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
Focused on the best practices for component reusability and customization.
We've worked hard to avoid bloating our SDK components with too much logic. If one of our React components begins to handle a lot of logic, we split it out into two components. We manage this by splitting the first component into a top-level, which will handle all logic needed and then a lower-level component for handling the component rendering. Splitting the components out into two levels makes rendering easier and more efficient for customization. Take the style of our components exactly where you want with baked-in support for SCSS.
Chat is active, so we've included ways to pay attention to performance with PureComponent.
Streami18n allows for built-in translations for components across multiple languages.
Meet The React Team
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:
Activity Feeds
Enterprise