React Chat Messaging UI 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 a feature rich chat messaging into your app with a much loved 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 basically drop-in ready for your project. Try the demo.
Top Level Components
- Chat Wrapper for all components
- Chat Channels
- Channel Headers
- Channel Preview List
- Message Lists
- Threads
Message Components
- Message.js for logic and rendering
- Message Simple (default) style
- Message Team style
- Message Livestream style
- Attachments & Attachment actions
- Reaction selector
- CRUD messages actions
Input Components
- Write, upload, @mention, emoji's
- Large and Compact options
- Flat input option
- Chat autocomplete
- Editing UI/UX
Component States
- Chat offline/Down
- Loading channels
- Loading messages
- Preview Last Message
- Preview a list of Channels
Rich Media Messages
- Easily add Gif with our '/' command
- Images
- Image Gallery (multi-upload)
- URL Previews
- Video embeding
- File uploads with filetype icons
Utilities
- Customizable avatars
- Streami18n
- Date Separators
- Window management for threads
Flexibility & Reusability
We've focused on the best practices for component reusability and customization.
We've worked hard at not bloating our components with a lot of 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 busy working on our React components here at Stream. Our purpose is to always be improving and 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:
Talk to sales