-
Notifications
You must be signed in to change notification settings - Fork 281
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1 parent
d7d27fc
commit 146009a
Showing
199 changed files
with
19,161 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
module.exports = { | ||
plugins: [ | ||
[ | ||
'@docusaurus/plugin-content-docs', | ||
{ | ||
lastVersion: 'current', | ||
versions: { | ||
current: { | ||
label: 'v11', | ||
}, | ||
'11.x.x-legacy': { | ||
label: 'v11 (legacy)', | ||
path: 'v11-legacy', | ||
banner: 'unmaintained', | ||
}, | ||
}, | ||
}, | ||
], | ||
], | ||
}; |
14 changes: 14 additions & 0 deletions
14
...rus/react_versioned_docs/version-11.x.x-legacy/_docusaurus-components/GHComponentLink.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import React from 'react'; | ||
|
||
const GHComponentLink = ({ text, as: As = React.Fragment, path, branch = 'master' }) => { | ||
return ( | ||
<a | ||
target='_blank' | ||
href={`https://github.com/GetStream/stream-chat-react/blob/${branch}/src/components${path}`} | ||
> | ||
<As>{text}</As> | ||
</a> | ||
); | ||
}; | ||
|
||
export default GHComponentLink; |
Binary file added
BIN
+233 KB
...aurus/react_versioned_docs/version-11.x.x-legacy/assets/AgoraDashboardRoles.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+257 KB
...act_versioned_docs/version-11.x.x-legacy/assets/AgoraDashboardSetPermission.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+766 KB
...saurus/react_versioned_docs/version-11.x.x-legacy/assets/AttachmentActions1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+761 KB
...saurus/react_versioned_docs/version-11.x.x-legacy/assets/AttachmentActions2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+52 KB
...rus/react_versioned_docs/version-11.x.x-legacy/assets/AttachmentSizeWarning.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+152 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/BasicStreamSetup.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+158 KB
...saurus/react_versioned_docs/version-11.x.x-legacy/assets/ChannelHeaderVideo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+171 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/CleanSetup.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+64.4 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/ConnectionStatus.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+22.9 KB
...aurus/react_versioned_docs/version-11.x.x-legacy/assets/CustomChannelHeader.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+190 KB
...aurus/react_versioned_docs/version-11.x.x-legacy/assets/CustomChannelSearch.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+93.5 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/CustomEmojiPicker.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+122 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/CustomMessage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+54.1 KB
...aurus/react_versioned_docs/version-11.x.x-legacy/assets/CustomMessageAction.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+44.3 KB
...saurus/react_versioned_docs/version-11.x.x-legacy/assets/CustomNotification.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+19.1 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/CustomPinMessage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+21.5 KB
...us/react_versioned_docs/version-11.x.x-legacy/assets/CustomPinMessagePinned.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+18.7 KB
...act_versioned_docs/version-11.x.x-legacy/assets/CustomPinMessagePinnedHover.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+33.4 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/CustomPreview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+42 KB
...us/react_versioned_docs/version-11.x.x-legacy/assets/CustomReactionSelector.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+35.9 KB
...aurus/react_versioned_docs/version-11.x.x-legacy/assets/CustomReactionsList.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+343 KB
...aurus/react_versioned_docs/version-11.x.x-legacy/assets/CustomSystemMessage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+34.9 KB
...saurus/react_versioned_docs/version-11.x.x-legacy/assets/CustomThreadHeader.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+30.7 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Diacritics.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.21 MB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Gallery.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+47.1 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Geolocation1.png
Oops, something went wrong.
Binary file added
BIN
+61.2 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Geolocation2.png
Oops, something went wrong.
Binary file added
BIN
+38.4 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Geolocation3.png
Oops, something went wrong.
Binary file added
BIN
+162 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Geolocation4.png
Oops, something went wrong.
Binary file added
BIN
+184 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/GiphyPreview.png
Oops, something went wrong.
Binary file added
BIN
+222 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/HMSGuideAfter.png
Oops, something went wrong.
Binary file added
BIN
+221 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/HMSGuideBefore.png
Oops, something went wrong.
Binary file added
BIN
+229 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/ImageSizing1.png
Oops, something went wrong.
Binary file added
BIN
+336 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/ImageSizing2.png
Oops, something went wrong.
Binary file added
BIN
+245 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/ImageSizing3.png
Oops, something went wrong.
Binary file added
BIN
+65.8 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Localization1.png
Oops, something went wrong.
Binary file added
BIN
+72.9 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Localization2.png
Oops, something went wrong.
Binary file added
BIN
+294 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/MentionClick.png
Oops, something went wrong.
Binary file added
BIN
+41.5 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/MentionHover.png
Oops, something went wrong.
Binary file added
BIN
+41.6 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/SubmitHandler.png
Oops, something went wrong.
Binary file added
BIN
+92.4 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Suggestions1.png
Oops, something went wrong.
Binary file added
BIN
+38 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Suggestions2.png
Oops, something went wrong.
Binary file added
BIN
+127 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Suggestions3.png
Oops, something went wrong.
Binary file added
BIN
+18.5 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/SystemMessage.png
Oops, something went wrong.
Binary file added
BIN
+280 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Theming1.png
Oops, something went wrong.
Binary file added
BIN
+391 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Theming2.png
Oops, something went wrong.
Binary file added
BIN
+343 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Theming3.png
Oops, something went wrong.
Binary file added
BIN
+30.9 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/Transliteration.png
Oops, something went wrong.
Binary file added
BIN
+34.4 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/TypingIndicator.png
Oops, something went wrong.
Binary file added
BIN
+53.7 KB
...act_versioned_docs/version-11.x.x-legacy/assets/_link-preview-message-input.png
Oops, something went wrong.
Binary file added
BIN
+16.9 KB
.../react_versioned_docs/version-11.x.x-legacy/assets/active-searchbar-no-text.png
Oops, something went wrong.
Binary file added
BIN
+17.8 KB
...eact_versioned_docs/version-11.x.x-legacy/assets/active-searchbar-with-text.png
Oops, something went wrong.
Binary file added
BIN
+374 KB
...docs/version-11.x.x-legacy/assets/base-image-fallback-in-attachment-gallery.png
Oops, something went wrong.
Binary file added
BIN
+23.5 KB
...docs/version-11.x.x-legacy/assets/base-image-fallback-in-attachment-preview.png
Oops, something went wrong.
Binary file added
BIN
+27.2 KB
...d_docs/version-11.x.x-legacy/assets/base-image-fallback-in-image-attachment.png
Oops, something went wrong.
Binary file added
BIN
+10.7 KB
...versioned_docs/version-11.x.x-legacy/assets/file-attachment-icon-set-v2-alt.png
Oops, something went wrong.
Binary file added
BIN
+7.3 KB
...oned_docs/version-11.x.x-legacy/assets/file-attachment-icon-set-v2-standard.png
Oops, something went wrong.
Binary file added
BIN
+29.6 KB
..._versioned_docs/version-11.x.x-legacy/assets/inactive-searchbar-no-app-menu.png
Oops, something went wrong.
Binary file added
BIN
+29.8 KB
...ersioned_docs/version-11.x.x-legacy/assets/inactive-searchbar-with-app-menu.png
Oops, something went wrong.
Binary file added
BIN
+61.4 KB
..._versioned_docs/version-11.x.x-legacy/assets/link-preview-edit-message-form.png
Oops, something went wrong.
Binary file added
BIN
+45.3 KB
...eact_versioned_docs/version-11.x.x-legacy/assets/link-preview-message-input.png
Oops, something went wrong.
Binary file added
BIN
+357 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/margin-inspector.png
Oops, something went wrong.
Binary file added
BIN
+108 KB
...sioned_docs/version-11.x.x-legacy/assets/message-actions-box-custom-actions.png
Oops, something went wrong.
Binary file added
BIN
+171 KB
docusaurus/react_versioned_docs/version-11.x.x-legacy/assets/message-height.png
Oops, something went wrong.
Binary file added
BIN
+15.7 KB
...t_versioned_docs/version-11.x.x-legacy/assets/message-payload-custom-fields.png
Oops, something went wrong.
Binary file added
BIN
+6.65 KB
...t_versioned_docs/version-11.x.x-legacy/assets/search-results-empty-theme-v1.png
Oops, something went wrong.
Binary file added
BIN
+8.41 KB
...t_versioned_docs/version-11.x.x-legacy/assets/search-results-empty-theme-v2.png
Oops, something went wrong.
Binary file added
BIN
+13.8 KB
..._versioned_docs/version-11.x.x-legacy/assets/search-results-inline-theme-v1.png
Oops, something went wrong.
Binary file added
BIN
+31.1 KB
..._versioned_docs/version-11.x.x-legacy/assets/search-results-inline-theme-v2.png
Oops, something went wrong.
Binary file added
BIN
+4.58 KB
...versioned_docs/version-11.x.x-legacy/assets/search-results-loading-theme-v1.png
Oops, something went wrong.
Binary file added
BIN
+4.92 KB
...versioned_docs/version-11.x.x-legacy/assets/search-results-loading-theme-v2.png
Oops, something went wrong.
Binary file added
BIN
+39.2 KB
...t_versioned_docs/version-11.x.x-legacy/assets/search-results-popup-theme-v1.png
Oops, something went wrong.
Binary file added
BIN
+53.7 KB
...t_versioned_docs/version-11.x.x-legacy/assets/search-results-popup-theme-v2.png
Oops, something went wrong.
Binary file added
BIN
+563 KB
...docs/version-11.x.x-legacy/assets/stream-chat-css-chat-ui-layout-screenshot.png
Oops, something went wrong.
Binary file added
BIN
+600 KB
...sioned_docs/version-11.x.x-legacy/assets/stream-chat-css-chat-ui-screenshot.png
Oops, something went wrong.
Binary file added
BIN
+676 KB
...11.x.x-legacy/assets/stream-chat-css-chat-ui-theme-customization-screenshot.png
Oops, something went wrong.
Binary file added
BIN
+678 KB
...version-11.x.x-legacy/assets/stream-chat-css-custom-avatar-color-screenshot.png
Oops, something went wrong.
Binary file added
BIN
+1.37 MB
...s/version-11.x.x-legacy/assets/stream-chat-css-custom-dark-theme-screenshot.png
Oops, something went wrong.
Binary file added
BIN
+1.41 MB
...sioned_docs/version-11.x.x-legacy/assets/stream-chat-css-dark-ui-screenshot.png
Oops, something went wrong.
Binary file added
BIN
+120 KB
...11.x.x-legacy/assets/stream-chat-css-message-color-customization-screenshot.png
Oops, something went wrong.
Binary file added
BIN
+120 KB
...1.x.x-legacy/assets/stream-chat-css-message-color-customization2-screenshot.png
Oops, something went wrong.
Binary file added
BIN
+120 KB
..._docs/version-11.x.x-legacy/assets/stream-chat-css-message-color-screenshot.png
Oops, something went wrong.
Binary file added
BIN
+1.4 MB
...ned_docs/version-11.x.x-legacy/assets/stream-chat-css-rtl-layout-screenshot.png
Oops, something went wrong.
Binary file added
BIN
+1.39 MB
...d_docs/version-11.x.x-legacy/assets/stream-chat-css-square-theme-screenshot.png
Oops, something went wrong.
Binary file added
BIN
+985 KB
...urus/react_versioned_docs/version-11.x.x-legacy/assets/stream-video-graphic.jpg
Oops, something went wrong.
Binary file added
BIN
+55.3 KB
...aurus/react_versioned_docs/version-11.x.x-legacy/assets/theme-v2-card-audio.png
Oops, something went wrong.
Binary file added
BIN
+103 KB
...aurus/react_versioned_docs/version-11.x.x-legacy/assets/theme-v2-card-image.png
Oops, something went wrong.
Binary file added
BIN
+59.9 KB
...aurus/react_versioned_docs/version-11.x.x-legacy/assets/theme-v2-card-video.png
Oops, something went wrong.
Binary file added
BIN
+6.1 KB
...act_versioned_docs/version-11.x.x-legacy/assets/theme-v2-empty-channel-list.png
Oops, something went wrong.
Binary file added
BIN
+3.34 KB
...act_versioned_docs/version-11.x.x-legacy/assets/theme-v2-empty-message-list.png
Oops, something went wrong.
Binary file added
BIN
+72 KB
...docs/version-11.x.x-legacy/assets/theme-v2-scroll-to-bottom-button-theme-v1.png
Oops, something went wrong.
Binary file added
BIN
+7.71 KB
...s/react_versioned_docs/version-11.x.x-legacy/assets/theme-v2-svg-attachment.png
Oops, something went wrong.
4 changes: 4 additions & 0 deletions
4
docusaurus/react_versioned_docs/version-11.x.x-legacy/basics/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"label": "Basics", | ||
"position": 1 | ||
} |
261 changes: 261 additions & 0 deletions
261
docusaurus/react_versioned_docs/version-11.x.x-legacy/basics/getting-started.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,261 @@ | ||
--- | ||
id: getting_started | ||
sidebar_position: 2 | ||
title: Getting Started | ||
--- | ||
|
||
This section provides a high level overview of the library setup, core components, and how they fit together. It's a great | ||
starting point and you can follow along in your code editor. For a complete, step-by-step guide in terms setting up a React | ||
project or instructions on creating specific files, see our [React Chat tutorial](https://getstream.io/chat/react-chat/tutorial/). | ||
|
||
## Your First App with Stream Chat React | ||
|
||
Before starting, make sure you have installed `stream-chat-react` (and `stream-chat`), as directed in the | ||
[Installation](./installation.mdx) section. | ||
|
||
The below example is all the code you need to launch a fully functioning chat experience. The [`Chat`](../components/core-components/chat.mdx) | ||
and [`Channel`](../components/core-components/channel.mdx) components are React context providers that pass a variety of values to their | ||
children, including UI components, stateful data, and action handler functions. | ||
|
||
```jsx | ||
const App = () => ( | ||
<Chat client={client}> | ||
<Channel channel={channel}> | ||
<Window> | ||
<ChannelHeader /> | ||
<MessageList /> | ||
<MessageInput /> | ||
</Window> | ||
<Thread /> | ||
</Channel> | ||
</Chat> | ||
); | ||
``` | ||
|
||
## Creating a Chat Client | ||
|
||
To communicate with the Stream Chat API, create an instance of Stream Chat client with your API key and pass via props into the `Chat` | ||
component. To generate an API key, you can sign up for a [free 30-day trial](https://getstream.io/chat/trial/) on our website. | ||
|
||
Initialize the Stream Chat client: | ||
|
||
```jsx | ||
import { StreamChat } from 'stream-chat'; | ||
|
||
const client = new StreamChat('your_api_key'); | ||
|
||
<Chat client={client}>{/** children of Chat component*/}</Chat>; | ||
``` | ||
|
||
## Connecting a User | ||
|
||
Tokens are used to authenticate a user. Typically, you send this token from your backend to your front end when a user logs in. | ||
See the [Tokens & Authentication](https://getstream.io/chat/docs/javascript/tokens_and_authentication/) documentation to learn more | ||
about creating tokens. For our purposes here, we will assume you have created and retrieved a `userToken`. | ||
|
||
To connect a user, call the `connectUser` method on your client instance with the user object and `userToken` provided as arguments. | ||
Connect the user directly after instantiating the client to establish a websocket connection with the Stream Chat API. Once the connection | ||
has been opened, your client instance will begin receiving events from the API. | ||
|
||
```jsx | ||
client.connectUser( | ||
{ | ||
id: 'dave-matthews', | ||
name: 'Dave Matthews', | ||
}, | ||
userToken, | ||
); | ||
``` | ||
|
||
## Creating a Channel | ||
|
||
Channels are at the core of Stream Chat. Within a channel you send/receive messages and interact with other users. Once a channel | ||
object has been initialized, the `Channel` component consumes the object and renders your chat app's functionality. | ||
|
||
By default, the Stream Chat API provides support for five different [channel types](https://getstream.io/chat/docs/react/channel_features/) | ||
of varying use cases. A channel type is required when creating a channel and dictates the available features and permissions. | ||
The defaults include: | ||
|
||
- `messaging` | ||
- `livestream` | ||
- `team` | ||
- `gaming` | ||
- `commerce` | ||
|
||
:::note | ||
You can also create [custom channel types](https://getstream.io/chat/docs/react/channel_features/#creating-a-channel-type) | ||
and define your own permission sets. | ||
::: | ||
|
||
To create an instance of a channel, call the `channel` method on your client instance. This method takes the following parameters: | ||
|
||
- channel type | ||
- channel ID (optional, will be auto-generated by the backend if not supplied) | ||
- channel data | ||
|
||
```jsx | ||
const channel = client.channel('messaging', { | ||
image: 'dave.png', | ||
name: 'Create a Messaging Channel', | ||
members: ['dave-matthews', 'trey-anastasio'], | ||
// option to add custom fields | ||
}); | ||
``` | ||
|
||
## Setting Up the UI Components | ||
|
||
Now that we have a client instance, a connected user, and a channel, it's time to look at the core components involved in building | ||
a fully functioning chat application. | ||
|
||
### Chat | ||
|
||
The [`Chat`](../components/core-components/chat.mdx) component is a React Context provider that wraps the entire Stream Chat application. It provides the [`ChatContext`](../components/contexts/chat-context.mdx) | ||
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. | ||
|
||
The client instance can be accessed with our custom context hook: | ||
|
||
```jsx | ||
const { client } = useChatContext(); | ||
``` | ||
|
||
### Channel | ||
|
||
The [`Channel`](../components/core-components/channel.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for an individual chat channel. | ||
It provides five separate contexts to its children: | ||
|
||
:::caution | ||
`EmojiContext` has been removed in version `11.0.0`, see related release guides ([Introducing new reactions](../release-guides/upgrade-to-v11.mdx#introducing-new-reactions), [Dropping support for built-in `EmojiPicker`](../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojipicker) and [Dropping support for built-in `EmojiIndex`](../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojiindex)) to adjust your integration to this new change. | ||
::: | ||
|
||
- [`ChannelStateContext`](../components/contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`) | ||
- [`ChannelActionContext`](../components/contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`) | ||
- [`ComponentContext`](../components/contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`) | ||
- [`EmojiContext`](../components/contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`) - removed in `11.0.0` | ||
- [`TypingContext`](../components/contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`) | ||
|
||
### ChannelList | ||
|
||
The [`ChannelList`](../components/core-components/channel-list.mdx) component renders a list of channels and provides a preview for each. Though the `ChannelList` is essential in many chat apps, | ||
it isn't a required piece of the library. If a `ChannelList` component is used, a channel object should not be placed as a prop on the `Channel` | ||
component, as the `ChannelList` handles channel setting internally. | ||
|
||
```jsx | ||
const App = () => ( | ||
<Chat client={client}> | ||
<ChannelList /> | ||
<Channel> | ||
<Window> | ||
<ChannelHeader /> | ||
<MessageList /> | ||
<MessageInput /> | ||
</Window> | ||
<Thread /> | ||
</Channel> | ||
</Chat> | ||
); | ||
``` | ||
|
||
### Window | ||
|
||
The [`Window`](../components/utility-components/window.mdx) component handles width changes in the main channel to ensure a seamless user experience when opening and closing a `Thread`. | ||
|
||
### ChannelHeader | ||
|
||
The [`ChannelHeader`](../components/utility-components/channel-header.mdx) displays pertinent information regarding the currently active channel, including image and title. | ||
|
||
### MessageList | ||
|
||
The [`MessageList`](../components/core-components/message-list.mdx) component renders a list of messages and consumes the various contexts setup from `Channel`. This component accepts a wide variety of optional props for customization needs. | ||
|
||
### MessageInput | ||
|
||
The [`MessageInput`](../components/message-input-components/message-input.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for the message input displayed in a channel. It provides the [`MessageInputContext`](../components/contexts/message-input-context.mdx) to its children. | ||
|
||
### Thread | ||
|
||
The [`Thread`](../components/core-components/thread.mdx) component renders a list of replies tied to a single parent message in a channel's main message list. A `Thread` maintains its own state and renders its own `MessageList` and `MessageInput` components. | ||
|
||
### Emojis (picker & autocomplete) | ||
|
||
The SDK is equipped with features designed to facilitate seamless integration, enabling developers to effortlessly incorporate emoji picker and emoji autocomplete (built on top of [`emoji-mart`](https://github.com/missive/emoji-mart)) functionalities for a comprehensive chat experience. | ||
|
||
Starting from version `11.0.0`, these features are entirely optional, requiring integrators to opt-in manually. The decision was made in conjunction with enhanced architecture, aiming to reduce the overall size of the final bundles of our integrators. | ||
|
||
Make sure to read ["Dropping support for built-in `EmojiPicker`"](../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojipicker) and ["Dropping support for built-in `EmojiIndex`"](../release-guides/upgrade-to-v11.mdx#dropping-support-for-built-in-emojiindex) release guides for more information. | ||
|
||
## Summary | ||
|
||
In addition to the above referenced UI components, client instantiation, and user connection, you need little other code to get a fully functioning chat application up and running. See below for an example of the complete code. | ||
|
||
:::note | ||
Remember our [Theming](../guides/theming/overview.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. They offer you a lot of flexibility when adopting our SDK. | ||
::: | ||
|
||
```tsx | ||
import React, { useEffect, useState } from 'react'; | ||
import { StreamChat } from 'stream-chat'; | ||
import { | ||
Chat, | ||
Channel, | ||
ChannelHeader, | ||
ChannelList, | ||
MessageList, | ||
MessageInput, | ||
Thread, | ||
Window, | ||
} from 'stream-chat-react'; | ||
import 'stream-chat-react/dist/css/v2/index.css'; | ||
|
||
const filters = { type: 'messaging' }; | ||
const options = { state: true, presence: true, limit: 10 }; | ||
const sort = { last_message_at: -1 }; | ||
|
||
const App = () => { | ||
const [client, setClient] = useState(null); | ||
|
||
useEffect(() => { | ||
const newClient = new StreamChat('your_api_key'); | ||
|
||
const handleConnectionChange = ({ online = false }) => { | ||
if (!online) return console.log('connection lost'); | ||
setClient(newClient); | ||
}; | ||
|
||
newClient.on('connection.changed', handleConnectionChange); | ||
|
||
newClient.connectUser( | ||
{ | ||
id: 'dave-matthews', | ||
name: 'Dave Matthews', | ||
}, | ||
'your_user_token', | ||
); | ||
|
||
return () => { | ||
newClient.off('connection.changed', handleConnectionChange); | ||
newClient.disconnectUser().then(() => console.log('connection closed')); | ||
}; | ||
}, []); | ||
|
||
if (!client) return null; | ||
|
||
return ( | ||
<Chat client={client}> | ||
<ChannelList filters={filters} sort={sort} options={options} /> | ||
<Channel> | ||
<Window> | ||
<ChannelHeader /> | ||
<MessageList /> | ||
<MessageInput /> | ||
</Window> | ||
<Thread /> | ||
</Channel> | ||
</Chat> | ||
); | ||
}; | ||
|
||
export default App; | ||
``` | ||
|
||
With a basic chat app up and running with our default UI, it's time to take a deep dive into each individual component in the library. |
65 changes: 65 additions & 0 deletions
65
docusaurus/react_versioned_docs/version-11.x.x-legacy/basics/installation.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
--- | ||
id: installation | ||
sidebar_position: 1 | ||
slug: / | ||
title: Overview | ||
--- | ||
|
||
Building on top of the Stream Chat API, the Stream Chat React component library includes everything you need to build feature-rich and high-functioning chat user experiences out of the box. | ||
The library includes an extensive set of performant and customizable React components which allow you to get started quickly with little to no plumbing required. | ||
Use cases include team and social messaging, virtual events, livestream gaming, and customer support. The library supports: | ||
|
||
- Rich media messages | ||
- Reactions | ||
- Threads and quoted replies | ||
- Text input commands (ex: Giphy and @mentions) | ||
- Image and file uploads | ||
- Video playback | ||
- Read state and typing indicators | ||
- Channel and message lists | ||
|
||
## Where to get started | ||
|
||
If you are new to our SDK it is best to go through a of our [tutorial](https://getstream.io/chat/react-chat/tutorial/). | ||
|
||
After that, our [getting started page](./getting-started.mdx) is a great next step. | ||
|
||
:::tip | ||
If you are integrating our SDK, please pay attention to our [Theming](../guides/theming/overview.mdx) and [Customizing Components](../guides/customization/overview.mdx) sections in our guides. We see that most of our users can get very far by utilizing the flexibility of our SDKs. | ||
::: | ||
|
||
## Architecture | ||
|
||
A common pattern in the library is the use of context provider hooks (see [Contexts](./contexts/chat_context)). These custom hooks allow for effective value sharing between parent components and their children. | ||
This makes customization straightforward, as you can use our exported hooks in your custom components to receive the exact values needed, while also subscribing to context changes. | ||
|
||
The left navigation will guide you to the various documentation sections for information on everything regarding our robust component library. Check out the instructions below for adding the library to your React project. | ||
|
||
## Installation | ||
|
||
We recommended using the component library through a package manager. Stream Chat React is based on top of Stream's [JavaScript Client](https://getstream.io/chat/docs/javascript/?language=javascript). | ||
|
||
### Install with NPM | ||
|
||
```bash | ||
npm install stream-chat stream-chat-react | ||
``` | ||
|
||
### Install with Yarn | ||
|
||
```bash | ||
yarn add stream-chat stream-chat-react | ||
``` | ||
|
||
### Install via CDN | ||
|
||
In case you are not using a package manager, or you wish to build a simple proof of concept in CodePen for example, you can load the library through a direct script link. | ||
If you choose to do this, make sure you explicitly specify the version of the library to prevent breaking releases from affecting your app. | ||
|
||
```html | ||
<!-- Replace VERSION with the version of stream-chat and stream-chat-react --> | ||
<script src="https://cdn.jsdelivr.net/npm/stream-chat@VERSION"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/stream-chat-react@VERSION"></script> | ||
``` | ||
|
||
With the installation out of the way, let's get started exploring the basics of the library. |
4 changes: 4 additions & 0 deletions
4
docusaurus/react_versioned_docs/version-11.x.x-legacy/components/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"label": "Components", | ||
"position": 4 | ||
} |
4 changes: 4 additions & 0 deletions
4
docusaurus/react_versioned_docs/version-11.x.x-legacy/components/contexts/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"label": "React Contexts", | ||
"position": 5 | ||
} |
Oops, something went wrong.