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.
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.
Top Level Components
Chat wrapper for all components
Channel preview list
Message.js for logic and rendering
Message simple (default) style
Message team style
Message livestream style
Attachments & attachment actions
CRUD messages actions
Write, upload, @mention, emoji
Large and compact options
Flat input option
Preview last message
Preview a list of channels
Rich Media Messages
Easily add GIFs with our '/' command
Image gallery (multi-upload)
File uploads with filetype icons
Window management for threads
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.