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.

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.

Meet The React Team