@gifyourgame/stream-chat-react
v1.2.5008
Published
React components to create chat conversations or livestream style chat
Downloads
38
Readme
Official React SDK for Stream Chat
The official React components for Stream Chat, a service for building chat applications.
Quick Links
- Register to get an API key for Stream Chat
- React Chat Tutorial
- Chat UI Kit
- Example Apps
- Component Docs
- Internationalisation
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.
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.
Commands
- yarn docs-server
- yarn lint-fix
- yarn lint
Component Reusability
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.
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
stream-chat-react
uses SCSS for styling. 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
oryarn watch-styles
Alternatively, 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:
- English (en)
- Dutch (nl)
- Russian (ru)
- Turkish (tr)
- French (fr)
- Italian (it)
- 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.