Skip to content

Commit 20e554a

Browse files
chore: Refine README content (#3185)
### 🎯 Goal Updates the README so it reflects the latest SDK state. --------- Co-authored-by: MartinCupela <32706194+MartinCupela@users.noreply.github.com>
1 parent e74b653 commit 20e554a

1 file changed

Lines changed: 7 additions & 9 deletions

File tree

README.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -54,41 +54,39 @@ For complete pricing and details visit our [Chat Pricing Page](https://getstream
5454

5555
## Example Applications
5656

57-
We have built five demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual event. You can preview these [demos](https://getstream.io/chat/demos/) on our website. Also, the code is [open source](https://github.com/GetStream/website-react-examples/).
57+
We have built demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual events. You can preview these [demos](https://getstream.io/chat/demos/) on our website.
5858

5959
## Documentation
6060

6161
We use a doc generator to build our [component documentation](https://getstream.io/chat/docs/sdk/react/). We provide a brief description of each chat component and define all of the props it accepts.
6262

63-
The React components are created using the [stream-chat](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, it's likely you'll need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/javascript/) on our website.
63+
The React components are created using the [stream-chat](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, you'll likely need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/javascript/) on our website.
6464

6565
## Component Reusability
6666

67-
For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `CustomMessageUI` (using `WithComponents`), without affecting any logic in the application.
67+
For components that implement significant logic, it's helpful to split the component into two parts: a top-level component that handles functionality and a lower-level component that renders the UI. This way, you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `CustomMessageUI` (using `WithComponents`), without affecting any logic in the application.
6868

6969
```jsx
7070
<Channel>
7171
<Window>
7272
<ChannelHeader />
73-
<WithComponents overrides={{ Message: CustomMessageUI }}>
73+
<WithComponents overrides={{ MessageUI: CustomMessageUI }}>
7474
<MessageList />
7575
</WithComponents>
76-
<MessageInput />
76+
<MessageComposer />
7777
</Window>
7878
<Thread />
7979
</Channel>
8080
```
8181

8282
### Customizing Styles
8383

84-
The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into your main CSS file (or CSS file loaded with your chat application). Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults (ideally within the stream-overrides layer). Layers (when ordered correctly, see example) ensure that your overrides take precedence even if your overriding selectors are less specific. For example:
84+
The preferred method for overriding the pre-defined styles in the library is a two-step process. First, import our bundled CSS into your main CSS file (or CSS file loaded with your chat application). Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults (ideally within the stream-overrides layer). Layers (when ordered correctly, see example) ensure that your overrides take precedence even if your overriding selectors are less specific. For example:
8585

8686
```css title="index.css"
8787
@layer stream, stream-overrides;
8888

89-
@import 'stream-chat-react/css/v2/index.css' layer(stream);
90-
/* or */
91-
@import 'stream-chat-react/dist/css/v2/index.css' layer(stream);
89+
@import 'stream-chat-react/css/index.css' layer(stream);
9290

9391
@layer stream-overrides {
9492
/* your overrides */

0 commit comments

Comments
 (0)