Skip to main content

Chat

The Chat component is a React Context provider that wraps the entire Stream Chat application. It provides the ChatContext to its children, which includes the StreamChat client instance. All other components within the library must be nested as children of Chat to maintain proper functionality.

Basic Usage#

The Chat component does not inject any UI, so its implementation is fairly simple. Once an instance of the StreamChat client has been created, you pass the client object as a prop to add it to the ChatContext.

<Chat client={client}>
<Channel channel={channel}>
<MessageList />
<MessageInput />
</Channel>
</Chat>

Any child of the Chat component has access to the ChatContext. Each React Context in the component library can be accessed with one of our custom hooks, which must be imported individually.

const { client } = useChatContext();

Props#

Required
client#

The StreamChat client instance. Any methods from the stream-chat-js API interface can be run off this object.

const channel = client.channel('messaging', {
members: ['nate', 'roy'],
});
Type
object

customClasses#

Object containing custom CSS classnames to override the library's default container CSS. See CSS and Theming for implementation assistance.

Type
object

customStyles#

Object containing custom styles to override the default CSS variables. See CSS and Theming for implementation assistance.

Type
object

darkMode#

If true, toggles the CSS variables to the default dark mode color palette.

TypeDefault
booleanfalse

defaultLanguage#

Sets the default fallback language for UI component translation, defaults to 'en' for English.

TypeDefault
string'en'

i18nInstance#

The Streami18n translation instance. Create an instance of this class when you wish to change the connected user's default language or override default text in the library.

const i18nInstance = new Streami18n({
language: 'es',
translationsForLanguage: {
'Nothing yet...': 'Nada',
},
});

<Chat client={client} i18nInstance={i18nInstance}>
{// children of Chat component}
</Chat>
Type
object

initialNavOpen#

When the screen width is at a mobile breakpoint, whether or not the mobile navigation menu is open.

TypeDefault
booleantrue

theme#

Deprecated and to be removed in a future major release. Use the customStyles prop to adjust CSS variables and customize the theme of your app.

Type
Theme

useImageFlagEmojisOnWindows#

Windows 10 does not support country flag emojis out of the box. It chooses to render these emojis as characters instead. Stream Chat can override this behavior by loading a custom web font that will render images instead (PNGs or SVGs depending on the platform). Set this prop to true if you want to use these custom emojis for Windows users.

TypeDefault
booleanfalse

Did you find this page helpful?