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
Copy file name to clipboardExpand all lines: CHANGELOG.md
+9-2Lines changed: 9 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,18 @@
4
4
### Bug Fixes
5
5
6
6
* remove props spreading on React.Fragment (dragAndDropWindow) ([#1835](https://github.com/GetStream/stream-chat-react/issues/1835)) ([40c799a](https://github.com/GetStream/stream-chat-react/commit/40c799a9ed863dba9da1207b32966fe16b00349b))
7
+
* MessageSimple to apply renderText function from properties (#1824) ([7133b33](https://github.com/GetStream/stream-chat-react/pull/1824/commits/7133b331a336a1fd258038fe0de8b1bf7edc8ff6))
- Replace stale `react-images` dependency with `react-image-gallery`, removed `ModalImage`[#1318](https://github.com/GetStream/stream-chat-react/pull/1318)
590
597
- Add support for accessibility through the use of semantic HTML, ARIA attributes. Updates include changing HTML elements to different types as necessary [#1314](https://github.com/GetStream/stream-chat-react/pull/1314) and [#1294](https://github.com/GetStream/stream-chat-react/pull/1294)
Copy file name to clipboardExpand all lines: docusaurus/docs/React/basics/getting-started.mdx
+19-15Lines changed: 19 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,8 +15,8 @@ project or instructions on creating specific files, see our [React Chat tutorial
15
15
Before starting, make sure you have installed `stream-chat-react` (and `stream-chat`), as directed in the
16
16
[Installation](./installation.mdx) section.
17
17
18
-
The below example is all the code you need to launch a fully functioning chat experience. The [`Chat`](../core-components/chat.mdx)
19
-
and [`Channel`](../core-components/channel.mdx) components are React context providers that pass a variety of values to their
18
+
The below example is all the code you need to launch a fully functioning chat experience. The [`Chat`](../components/core-components/chat.mdx)
19
+
and [`Channel`](../components/core-components/channel.mdx) components are React context providers that pass a variety of values to their
20
20
children, including UI components, stateful data, and action handler functions.
21
21
22
22
```jsx
@@ -128,7 +128,7 @@ a fully functioning chat application.
128
128
129
129
### Chat
130
130
131
-
The [`Chat`](../core-components/chat.mdx) component is a React Context provider that wraps the entire Stream Chat application. It provides the [`ChatContext`](../contexts/chat-context.mdx)
131
+
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)
132
132
to its children, which includes the `StreamChat` client instance. All other components within the library must be nested as children
The [`Channel`](../core-components/channel.mdx) component is a React Context provider that wraps all of the logic, functionality, and UI for an individual chat channel.
143
+
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.
144
144
It provides five separate contexts to its children:
145
145
146
-
-[`ChannelStateContext`](../contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
147
-
-[`ChannelActionContext`](../contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
148
-
-[`ComponentContext`](../contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`)
149
-
-[`EmojiContext`](../contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`)
150
-
-[`TypingContext`](../contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)
146
+
-[`ChannelStateContext`](../components/contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
147
+
-[`ChannelActionContext`](../components/contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
148
+
-[`ComponentContext`](../components/contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`)
149
+
-[`EmojiContext`](../components/contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`)
150
+
-[`TypingContext`](../components/contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)
151
151
152
152
### ChannelList
153
153
154
-
The [`ChannelList`](../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,
154
+
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,
155
155
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`
156
156
component, as the `ChannelList` handles channel setting internally.
157
157
@@ -173,28 +173,32 @@ const App = () => (
173
173
174
174
### Window
175
175
176
-
The [`Window`](../utility-components/window.mdx) component handles width changes in the main channel to ensure a seamless user experience when opening and closing a `Thread`.
176
+
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`.
177
177
178
178
### ChannelHeader
179
179
180
-
The [`ChannelHeader`](../utility-components/channel-header.mdx) displays pertinent information regarding the currently active channel, including image and title.
180
+
The [`ChannelHeader`](../components/utility-components/channel-header.mdx) displays pertinent information regarding the currently active channel, including image and title.
181
181
182
182
### MessageList
183
183
184
-
The [`MessageList`](../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.
184
+
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.
185
185
186
186
### MessageInput
187
187
188
-
The [`MessageInput`](../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`](../contexts/message-input-context.mdx) to its children.
188
+
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.
189
189
190
190
### Thread
191
191
192
-
The [`Thread`](../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.
192
+
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.
193
193
194
194
## Summary
195
195
196
196
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.
197
197
198
+
:::note
199
+
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.
Copy file name to clipboardExpand all lines: docusaurus/docs/React/basics/installation.mdx
+10Lines changed: 10 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,6 +18,16 @@ Use cases include team and social messaging, virtual events, livestream gaming,
18
18
- Read state and typing indicators
19
19
- Channel and message lists
20
20
21
+
## Where to get started
22
+
23
+
If you are new to our SDK it is best to go through a of our [tutorial](https://getstream.io/chat/react-chat/tutorial/).
24
+
25
+
After that, our [getting started page](./getting-started.mdx) is a great next step.
26
+
27
+
:::tip
28
+
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.
29
+
:::
30
+
21
31
## Architecture
22
32
23
33
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.
The `ChatContext` is exposed by the [`Chat`](../core-components/chat.mdx) component. Since `Chat` wraps the entire chat application, all other components in the library
10
10
have access to the values stored in this context. You can access the context values by calling the `useChatContext` custom hook.
@@ -52,7 +52,7 @@ The function to close mobile navigation.
52
52
53
53
### customClasses
54
54
55
-
Object containing custom CSS classnames to override the library's default container CSS. See [CSS and Theming](../customization/css-and-theming.mdx)
55
+
Object containing custom CSS classnames to override the library's default container CSS. See [CSS and Theming](../../guides/theming/css-and-theming.mdx)
56
56
for implementation assistance.
57
57
58
58
| Type |
@@ -128,7 +128,7 @@ You can override the default behavior by pulling it from context and then utiliz
128
128
129
129
### theme
130
130
131
-
Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../customization/css-and-theming.mdx#css-variables) of your app.
131
+
Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../../guides/theming/css-and-theming.mdx#css-variables) of your app.
132
132
133
133
| Type |
134
134
| ----- |
@@ -142,7 +142,7 @@ Deprecated and to be removed in a future major release. Use the `customStyles` p
142
142
143
143
### themeVersion
144
144
145
-
Stream chat theme version 2 has been introduced with the release of stream-chat-react v10.0.0. This flag is used internally by some UI components of the SDK and the integrators shouldn't need to use it. The value is extracted from a CSS variable `--str-chat__theme-version`. You can set it to values `'1'` or `'2'` in your stylesheets and import the corresponding v2 stylesheet from `stream-chat-react/dist`. Find out more about benefits that the theme version 2 brings to the integrators with [the theming guide](../theming/introduction.mdx).
145
+
Stream chat theme version 2 has been introduced with the release of stream-chat-react v10.0.0. This flag is used internally by some UI components of the SDK and the integrators shouldn't need to use it. The value is extracted from a CSS variable `--str-chat__theme-version`. You can set it to values `'1'` or `'2'` in your stylesheets and import the corresponding v2 stylesheet from `stream-chat-react/dist`. Find out more about benefits that the theme version 2 brings to the integrators with [the theming guide](../../guides/theming/css-and-theming.mdx).
The `ComponentContext` is a one of the context providers exposed by the [`Channel`](../core-components/channel.mdx) component and is
10
10
consumable by all the children of `Channel`. This context provides UI component override options for maximum customization.
@@ -295,7 +295,7 @@ Custom UI component to display the header of a `Thread`.
295
295
296
296
### ThreadInput
297
297
298
-
Custom UI component to replace the `MessageInput` of a `Thread`. For the applications using [theme version](../theming/introduction.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
298
+
Custom UI component to replace the `MessageInput` of a `Thread`. For the applications using [theme version](../../guides/theming/css-and-theming.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
0 commit comments