stream-chat-react
Advanced tools
React components to create chat conversations or livestream style chat
The official React components for Stream Chat, a service for building chat applications.
Quick Links
With our component library, you can build a variety of chat use cases, including:
The best way to get started is to follow the React Chat Tutorial. It shows you how to use this SDK to build a fully functional chat application and includes common customizations.
Stream is free for most side and hobby projects. To qualify, your project/company must have no more than 5 team members and earn less than $10k in monthly revenue. For complete pricing and details visit our Chat Pricing Page.
npm install react react-dom stream-chat stream-chat-react
yarn add react react-dom stream-chat stream-chat-react
<script src="https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stream-chat"></script>
<script src="https://cdn.jsdelivr.net/npm/stream-chat-react"></script>
We have built five demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual event. You can preview these demos on our website. Also, the code is open source.
We use a doc generator to build our component documentation. We provide a brief description of each chat component and define all of the props it accepts.
The React components are created using the stream-chat-js library. If you're customizing the components, it's likely you'll need to make additional calls to our Chat API using our JavaScript client, which has documentation on our website.
As of version 5.0.0, the component library has been converted to TypeScript. Please read the TypeScript guide for details and implementation assistance.
For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the Message UI component with MessageTeam, without affecting any logic in the app.
<Channel Message={MessageTeam}>
<Window>
<ChannelHeader />
<MessageList />
<MessageInput />
</Window>
<Thread />
</Channel>
The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
import 'stream-chat-react/dist/css/v2/index.css';
import './App.css';
Our library supports auto-translation for various user languages. Please read our internationalization documentation for further details and setup guidance.
We welcome code changes that improve this library or fix a problem. Please make sure to follow all best practices and add tests, if applicable, before submitting a pull request on GitHub. We are pleased to merge your code into the official repository if it meets a need. Make sure to sign our Contributor License Agreement (CLA) first. See our license file for more details.
We recently closed a $38 million Series B funding round and are actively growing. Our APIs are used by more than a billion end-users, and by working at Stream, you have the chance to make a huge impact on a team of very strong engineers.
Check out our current openings and apply via Stream's website.
This project uses lamejs library under the LGPL license to convert the recorded audio to mp3 format.
The library source code is dynamically imported and used only if audio recording is enabled.
You can obtain the source code for lamejs from the lamejs repository that is a fork of the original JS library.
You can find the source code for LAME at https://lame.sourceforge.net and its license at: https://lame.sourceforge.net/license.txt
FAQs
React components to create chat conversations or livestream style chat
The npm package stream-chat-react receives a total of 58,301 weekly downloads. As such, stream-chat-react popularity was classified as popular.
We found that stream-chat-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.