All Projects → GetStream → Stream Chat React

GetStream / Stream Chat React

Licence: other
Stream Chat official react SDK

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Stream Chat React

Stream Chat Android
Stream Chat official Android SDK. The tutorial covers how to build your own chat experience using either Java or Kotlin.
Stars: ✭ 165 (-16.67%)
Mutual labels:  chat
Chatlayout
ChatLayout is an alternative solution to MessageKit. It uses custom UICollectionViewLayout to provide you full control over the presentation as well as all the tools available in UICollectionView. It supports dynamic cells and supplementary view sizes.
Stars: ✭ 184 (-7.07%)
Mutual labels:  chat
Ruma
A set of Rust crates for interacting with the Matrix chat network.
Stars: ✭ 189 (-4.55%)
Mutual labels:  chat
Qiscus Sdk Android
Qiscus provide everything you need to power up your app with chats. And it's now made simple.
Stars: ✭ 175 (-11.62%)
Mutual labels:  chat
Android Firebase Kotlin Java Mvp Mvc Mvvm Chat
Simple chat Application with one to one connectivity using Firebase Real time Database written in MVC,MVP and MVVM architecture to better understand the android coding patterns. Purpose of writing same application functionality with 3 different pattern is to show how single application can be developed using 3 different patterns(Mvc, Mvp, Mvvm).
Stars: ✭ 180 (-9.09%)
Mutual labels:  chat
Discordchatexporter
Exports Discord chat logs to a file
Stars: ✭ 3,198 (+1515.15%)
Mutual labels:  chat
Mnm
The legitimate email replacement — n-identity, decentralized, store-and-forward, open protocol, open source. (Server)
Stars: ✭ 162 (-18.18%)
Mutual labels:  chat
Cookim
Distributed web chat application base websocket built on akka.
Stars: ✭ 198 (+0%)
Mutual labels:  chat
Tc
A desktop chat client for Twitch
Stars: ✭ 182 (-8.08%)
Mutual labels:  chat
Wechat
聊天系统、Vue.js、React.js、node.js、MongoDB、websocket、socket.io、前后端分离、毕业设计。
Stars: ✭ 188 (-5.05%)
Mutual labels:  chat
Twilio Contact Center
A contact center built on Twilio, supporting voice calls, web chat, callback, Facebook Messenger and SMS chat
Stars: ✭ 176 (-11.11%)
Mutual labels:  chat
Telebot
Write Telegram bots in Rust with Tokio and Futures
Stars: ✭ 179 (-9.6%)
Mutual labels:  chat
Flutter hrlweibo
Flutter仿微博客户端, 包含首页、视频、发现、消息(仿微博聊界面)及个人中心模块
Stars: ✭ 2,336 (+1079.8%)
Mutual labels:  chat
Tigase Server
Highly optimized, extremely modular and very flexible XMPP/Jabber server
Stars: ✭ 170 (-14.14%)
Mutual labels:  chat
Swift
Swift XMPP client and Swiften XMPP library
Stars: ✭ 190 (-4.04%)
Mutual labels:  chat
React Messenger
Chat UX components built with React, inspired by Facebook Messenger
Stars: ✭ 167 (-15.66%)
Mutual labels:  chat
Weechat
The extensible chat client.
Stars: ✭ 2,349 (+1086.36%)
Mutual labels:  chat
Srain
Modern IRC client written in GTK
Stars: ✭ 197 (-0.51%)
Mutual labels:  chat
Tindroid
Tinode chat client application for Android
Stars: ✭ 194 (-2.02%)
Mutual labels:  chat
Gateway
🚀构建分布式即时聊天、消息推送系统。 Building distributed instant messaging, push notification systems.
Stars: ✭ 188 (-5.05%)
Mutual labels:  chat

Official React SDK for Stream Chat

react native chat

The official React components for Stream Chat, a service for building chat applications.

NPM build Component Reference codecov

Quick Links

With these chat components, you can support any chat use case:

  • Livestreams like Twitch or Youtube
  • In-Game chat like Overwatch or Fortnite
  • Team style chat like Slack
  • Messaging style chat like Whatsapp or Facebook's messenger
  • Commerce chat like Drift or Intercom

React Chat Tutorial

The best place to start is the React Chat Tutorial. It teaches you how to use this SDK and also shows how to make frequently required changes.

Free for Makers

Stream is free for most side and hobby projects. To qualify your project/company needs to have < 5 team members and < $10k in monthly revenue. For complete pricing details visit our Chat Pricing Page

Installation

Install with NPM

npm install --save react react-dom stream-chat stream-chat-react

Install with Yarn

yarn add react react-dom stream-chat stream-chat-react

Using JS deliver

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Example Apps

This repo includes 4 example apps. You can try them out like this:

git clone [email protected]:GetStream/stream-chat-react.git
cd examples/messaging
yarn
yarn start

The four examples are messaging, team, commerce and livestream. You can also preview these demos online in the Chat Demos

Docs

The styleguidist docs for stream-chat-react document how all the components work.

The React components are created using the stream-chat-js library. If you're customizing the components, it's important to learn how the Chat Server API works. You'll want to review our JS chat API docs.

Typescript

Note: The stream-chat-js library allows for fully typed responses using generics, currently the React SDK does not allow for user defined types via generics, so custom fields will be returned with type unknown and need to be ignored using @ts-ignore when using custom components in typescript.

Commands

  • yarn docs-server
  • yarn lint-fix
  • yarn lint

Component Reusability

  1. If a component implements a ton of logic, it's helpful if you split it out into two parts: The top-level component, which handles all the logic, and a lower level component, which handles rendering. That makes it easy to change the rendering without having to touch the other stuff. Have a look at Message and MessageTeam to see how this approach works.

  2. Make things configurable via the props where possible. Sometimes an even better approach is to use the props.children. Have a look at how flexible the channel layout is due to this approach:

<Channel>
  <Window>
    <ChannelHeader type="Team" />
    <MessageList />
    <MessageInput />
  </Window>
  <Thread />
</Channel>

Customizing styles

The preferred method for overriding styles from stream-chat-react is to import the CSS file into your project in App.js from the dist directory. Then, locate any Stream selectors you want to override using either the browser or by viewing the library code, and then add these to your local CSS file with your styles. For example:

import 'stream-chat-react/dist/css/index.css';
import './App.css';

Alternatively, there may be times when you want to make simple changes to our stylesheets and don't want to override classes and styles manually. To make these customizations, you can do the following:

  • Clone this repository
  • Make the changes you want in the SCSS files
  • Run yarn build-styles or yarn watch-styles

As another alternative option if you're also using SCSS for styling, you can import component styles directly in your .scss files. For example:

// customChatDownComponent.scss
@import 'node_modules/stream-chat-react/dist/scss/ChatDown.scss';

.myCustomChatDown {
  background: rgba(blue, 0.7);
}

Depending on your build system configuration, you might have issues importing SCSS files that require images from our provided assets. For example, if you're using create-react-app and you try to introduce one of those SCSS files, you'll see an error telling you that Relative imports outside of src/ are not supported.

You can work around this kind of issue by overwriting the $assetsPath variable and making sure you provide the necessary assets accordingly:

@import 'node_modules/stream-chat-react/dist/scss/_variables.scss';
$assetsPath: '/img'; // This will make url(..) calls compiles to url('/img/<asset-name>.png').
@import 'node_modules/stream-chat-react/dist/scss/index.scss';

Performance

Since chat can get pretty active, it's essential to pay attention to performance. For every component either:

  • Implement shouldComponentUpdate
  • Extend PureComponent

You can verify if the update behavior is correct by sticking this code in your component:

import React from 'react';
import diff from 'shallow-diff';

export default class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    console.log(diff(this.props, nextProps));
  }
}

Note that the PureComponent uses a shallow diff to determine if a component should rerender upon state change. The regular component simply always rerenders when there is a state change.

You can read more about PureComponents and common gotchas here: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

You want the shallow diff only to be true if something changed. Common mistakes that hurt performance are:

  • Mistake: Passing anonymous functions (those are different every time)
  • Solution: Use a regular function
  • Mistake: Passing an object {} or an array [] that's not using seamless-immutable
  • Solution: Use an immutable type (i.e., a number or a string) or use a seamless immutable version of an object or an array

Internationalisation

Instance of class Streami18n should be provided to the Chat component to handle translations. Stream provides the following list of in-built translations for components:

  1. English (en)
  2. Dutch (nl)
  3. Russian (ru)
  4. Turkish (tr)
  5. French (fr)
  6. Italian (it)
  7. Hindi (hi)

The default language is English. The simplest way to start using chat components in one of the in-built languages would be the following:

Simplest way to start using chat components in one of the in-built languages would be following:

const i18n = new Streami18n({ language: 'nl' });
<Chat client={chatClient} i18nInstance={i18n}>
  ...
</Chat>;

If you would like to override certain keys in in-built translation:

const i18n = new Streami18n({
  language: 'nl',
  translationsForLanguage: {
    'Nothing yet...': 'Nog Niet ...',
    '{{ firstUser }} and {{ secondUser }} are typing...':
      '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',
  },
});

You can find all the available keys here: https://github.com/GetStream/stream-chat-react/tree/master/src/i18n

They are also exported as a JSON object from the library.

import {
  enTranslations,
  nlTranslations,
  ruTranslations,
  trTranslations,
  frTranslations,
  hiTranslations,
  itTranslations,
  esTranslations,
} from 'stream-chat-react';

Please read this docs on i18n for more details and further customizations - https://getstream.github.io/stream-chat-react/#section-streami18n

Contributing

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. Make sure to sign our Contributor License Agreement (CLA) first. See our license file for more details.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].