From f740e789535daee96386687d221a55c7a28b723d Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Mon, 13 Nov 2023 11:36:36 +0100 Subject: [PATCH] Adjust documentation --- .../docs/React/basics/getting-started.mdx | 8 +++++++ .../guides/channel-list-infinite-scroll.mdx | 21 +++++++++---------- .../React/release-guides/emoji-picker-v11.mdx | 8 +++---- .../release-guides/emoji-search-index-v11.mdx | 2 +- 4 files changed, 23 insertions(+), 16 deletions(-) diff --git a/docusaurus/docs/React/basics/getting-started.mdx b/docusaurus/docs/React/basics/getting-started.mdx index 259b6d4f9d..b8b2c73c60 100644 --- 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 index 62915c948b..d88d3ded11 100644 --- 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) => ; -... - +// ... + +; ``` 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 index 8678119100..8d7a10a3f0 100644 --- 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 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 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 index bd65971adc..4d5ee460c6 100644 --- 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: