You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* cleanup ML types and defaults ([#2305](https://github.com/GetStream/stream-chat-react/issues/2305)) ([b3ed81d](https://github.com/GetStream/stream-chat-react/commit/b3ed81dd7a99ed32fb47c81a7b4e0b8e41f6d823))
This section provides a high level overview of the library setup, core components, and how they fit together. It's a great
8
-
starting point and you can follow along in your code editor. For a complete, step-by-step guide in terms setting up a React
9
-
project or instructions on creating specific files, see our [React Chat tutorial](https://getstream.io/chat/react-chat/tutorial/).
6
+
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/).
10
7
11
8
## Your First App with Stream Chat React
12
9
13
10
Before starting, make sure you have installed `stream-chat-react` (and `stream-chat`), as directed in the
14
11
[Installation](./installation.mdx) section.
15
12
16
-
The below example is all the code you need to launch a fully functioning chat experience. The [`Chat`](../components/core-components/chat.mdx)
17
-
and [`Channel`](../components/core-components/channel.mdx) components are React context providers that pass a variety of values to their
18
-
children, including UI components, stateful data, and action handler functions.
13
+
You'll also need to [register](https://getstream.io/chat/trial/) and create a free tier (for up to 25 MAU) Stream application to access credentials from which you'll be able to [generate a token](https://getstream.io/chat/docs/react/token_generator/) for a user which can access your chat application.
19
14
20
-
```jsx
21
-
constApp= () => (
22
-
<Chat client={client}>
23
-
<Channel channel={channel}>
24
-
<Window>
25
-
<ChannelHeader />
26
-
<MessageList />
27
-
<MessageInput />
28
-
</Window>
29
-
<Thread />
30
-
</Channel>
31
-
</Chat>
32
-
);
33
-
```
15
+
The example below is all the code you'll 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.
34
16
35
-
## Creating a Chat Client
17
+
```jsx
18
+
import {
19
+
Chat,
20
+
Channel,
21
+
ChannelList,
22
+
Window,
23
+
ChannelHeader,
24
+
MessageList,
25
+
MessageInput,
26
+
Thread,
27
+
useCreateChatClient,
28
+
} from'stream-chat-react';
29
+
import'stream-chat-react/dist/css/v2/index.css';
36
30
37
-
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`
38
-
component. To generate an API key, you can sign up for a [free 30-day trial](https://getstream.io/chat/trial/) on our website.
Tokens are used to authenticate a user. Typically, you send this token from your backend to your front end when a user logs in.
53
-
See the [Tokens & Authentication](https://getstream.io/chat/docs/javascript/tokens_and_authentication/) documentation to learn more
54
-
about creating tokens. For our purposes here, we will assume you have created and retrieved a `userToken`.
55
-
56
-
To connect a user, call the `connectUser` method on your client instance with the user object and `userToken` provided as arguments.
57
-
Connect the user directly after instantiating the client to establish a websocket connection with the Stream Chat API. Once the connection
58
-
has been opened, your client instance will begin receiving events from the API.
59
-
60
-
```jsx
61
-
client.connectUser(
62
-
{
63
-
id:'dave-matthews',
64
-
name:'Dave Matthews',
65
-
},
66
-
userToken,
67
-
);
68
-
```
66
+
To communicate with the Stream Chat API the SDK requires a client with an established connection. The hook mentioned in the code above (`useCreateChatClient`) handles client instantiation, establishes proper connection and handles cleanups and disconnects for you. If you wish to have more control over how all of the previously mentioned is being handled see [Client and User](../guides/client-and-user.mdx) guide.
69
67
70
68
## Creating a Channel
71
69
72
70
Channels are at the core of Stream Chat. Within a channel you send/receive messages and interact with other users. Once a channel
73
71
object has been initialized, the `Channel` component consumes the object and renders your chat app's functionality.
74
72
75
-
By default, the Stream Chat API provides support for five different [channel types](https://getstream.io/chat/docs/react/channel_features/)
73
+
By default, the Stream Chat API provides support for five different [channel types](https://getstream.io/chat/docs/react/channel_features)
76
74
of varying use cases. A channel type is required when creating a channel and dictates the available features and permissions.
77
75
The defaults include:
78
76
@@ -95,66 +93,44 @@ To create an instance of a channel, call the `channel` method on your client ins
95
93
96
94
```jsx
97
95
constchannel=client.channel('messaging', {
98
-
image:'dave.png',
99
-
name:'Create a Messaging Channel',
96
+
image:'https://cdn.com/image.png',
97
+
name:'Just Chatting',
100
98
members: ['dave-matthews', 'trey-anastasio'],
101
99
// option to add custom fields
102
100
});
103
101
```
104
102
105
-
## Setting Up the UI Components
103
+
## Setting Up the Components
106
104
107
105
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
108
106
a fully functioning chat application.
109
107
110
108
### Chat
111
109
112
-
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)
113
-
to its children, which includes the `StreamChat` client instance. All other components within the library must be nested as children
114
-
of `Chat` to maintain proper functionality.
110
+
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.
115
111
116
112
The client instance can be accessed with our custom context hook:
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.
125
-
It provides five separate contexts to its children:
126
-
127
-
:::caution
128
-
`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.
129
-
:::
124
+
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:
130
125
131
126
-[`ChannelStateContext`](../components/contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
132
127
-[`ChannelActionContext`](../components/contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
133
128
-[`ComponentContext`](../components/contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`)
134
-
-[`EmojiContext`](../components/contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`) - removed in `11.0.0`
135
129
-[`TypingContext`](../components/contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)
136
130
137
131
### ChannelList
138
132
139
-
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,
140
-
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`
141
-
component, as the `ChannelList` handles channel setting internally.
142
-
143
-
```jsx
144
-
constApp= () => (
145
-
<Chat client={client}>
146
-
<ChannelList />
147
-
<Channel>
148
-
<Window>
149
-
<ChannelHeader />
150
-
<MessageList />
151
-
<MessageInput />
152
-
</Window>
153
-
<Thread />
154
-
</Channel>
155
-
</Chat>
156
-
);
157
-
```
133
+
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.
158
134
159
135
### Window
160
136
@@ -178,84 +154,10 @@ The [`Thread`](../components/core-components/thread.mdx) component renders a lis
178
154
179
155
### Emojis (picker & autocomplete)
180
156
181
-
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.
182
-
183
-
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.
157
+
The SDK is equipped with features designed to facilitate seamless integration, enabling developers to effortlessly incorporate [emoji picker](../guides/customization/emoji-picker.mdx) and emoji autocomplete (built on top of [`emoji-mart`](https://github.com/missive/emoji-mart)) functionalities for a comprehensive chat experience.
184
158
185
-
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.
186
-
187
-
## Summary
188
-
189
-
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.
159
+
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.
190
160
191
161
:::note
192
-
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.
162
+
Read more about customization in our [Theming](../theming/introduction.mdx) and [Customizing Components](../guides/customization/overview.mdx) guides.
0 commit comments