Adjust documentation

GetStream · Nov 22, 2023 · e6cb860 · e6cb860
1 parent 4f0a715
commit e6cb860
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 16 deletions.
diff --git a/docusaurus/docs/React/basics/getting-started.mdx b/docusaurus/docs/React/basics/getting-started.mdx
@@ -176,6 +176,14 @@ The [`MessageInput`](../components/message-input-components/message-input.mdx) c
 
 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 ["EmojiPicker 11.0.0"](../release-guides/emoji-picker-v11.mdx) and ["emojiSearchIndex 11.0.0"](../release-guides/emoji-search-index-v11.mdx) 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.

diff --git a/docusaurus/docs/React/guides/channel-list-infinite-scroll.mdx b/docusaurus/docs/React/guides/channel-list-infinite-scroll.mdx
@@ -28,20 +28,19 @@ import { ChannelList, InfiniteScroll } from 'stream-chat-react';
 If you would like to adjust the configuration parameters like `threshold`, `reverse` (`PaginatorProps`) or `useCapture`, etc. (`InfiniteScrollProps`), you can create a wrapper component where these props can be set:
 
 ```tsx
-import {
-  ChannelList,
-  InfiniteScroll,
-  InfiniteScrollProps
-} from 'stream-chat-react';
-
+import { ChannelList, InfiniteScroll, InfiniteScrollProps } from 'stream-chat-react';
 
 const Paginator = (props: InfiniteScrollProps) => <InfiniteScroll {...props} threshold={50} />;
 
-...
-<ChannelList filters={filters} sort={sort} options={options}
-             Paginator={Paginator}
-             showChannelSearch
-/>
+// ...
+
+<ChannelList
+  filters={filters}
+  sort={sort}
+  options={options}
+  Paginator={Paginator}
+  showChannelSearch
+/>;
 ```
 
 Especially the `threshold` prop may need to be set as the default is 250px. That may be too soon to load more channels.

diff --git a/docusaurus/docs/React/release-guides/emoji-picker-v11.mdx b/docusaurus/docs/React/release-guides/emoji-picker-v11.mdx
@@ -21,10 +21,10 @@ We made `emoji-mart` package in our SDK completely optional which means that `Em
 
 ### Reinstate the `EmojiPicker` component
 
-To reinstate the previous behavior you'll have to add `emoji-mart` to your packages and make sure the package versions fit our peer-dependency requirements:
+To reinstate the previous behavior you'll have to add `emoji-mart` to your packages and make sure the packages come with versions that fit our peer-dependency requirements:
 
 ```bash
-yarn add emoji-mart@^5.5.2 @emoji-mart/data@^1.1.2 @emoji-mart/react@^1.1.1
+yarn add emoji-mart @emoji-mart/data @emoji-mart/react
 ```
 
 Import `EmojiPicker` component from the `stream-chat-react` package:
@@ -42,7 +42,7 @@ const WrappedChannel = ({ children }) => {
 
 ### Build your custom `EmojiPicker` (with example)
 
-If `emoji-mart` is too heavy for your use-case and you'd like to build your own you can certainly do so, here's a simple `EmojiPicker` built using `emoji-picker-react` package:
+If `emoji-mart` is too heavy for your use-case and you'd like to build your own you can certainly do so, here's a very simple `EmojiPicker` example built using `emoji-picker-react` package:
 
 ```tsx
 import EmojiPicker from 'emoji-picker-react';
@@ -72,7 +72,7 @@ export const CustomEmojiPicker = () => {
 // and pass it down to the `Channel` component
 ```
 
-You can make the component slightly better using [`FloatingUI`](https://floating-ui.com/) by wrapping the actual picker element to make it float perfectly positioned above the button. See the source of the component <GHComponentLink text="EmojiPicker" branch="feat/emoji-picker-delete" as="code" path="/Emojis/EmojiPicker.tsx" /> which comes with the SDK for inspiration.
+You can make the component slightly better using [`FloatingUI`](https://floating-ui.com/) by wrapping the actual picker element to make it float perfectly positioned above the button. See the source of the <GHComponentLink text="EmojiPicker" branch="feat/emoji-picker-delete" as="code" path="/Emojis/EmojiPicker.tsx" /> component which comes with the SDK for inspiration.
 
 ## Old `emoji-mart` (v3.0.1)
 

diff --git a/docusaurus/docs/React/release-guides/emoji-search-index-v11.mdx b/docusaurus/docs/React/release-guides/emoji-search-index-v11.mdx
@@ -14,7 +14,7 @@ By default, our SDK comes bundled with the `emoji-mart`'s [`emojiIndex`](https:/
 Add `emoji-mart` to your packages and make sure the package versions fit our peer-dependency requirements:
 
 ```bash
-yarn add emoji-mart@^5.5.2 @emoji-mart/data@^1.1.2
+yarn add emoji-mart @emoji-mart/data
 ```
 
 Import `SearchIndex` and `data` from `emoji-mart`, initiate these data and then and pass `SearchIndex` to our `MessageInput` component: