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
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
125
It provides five separate contexts to its children:
126
126
127
+
:::caution
128
+
`EmojiContext` has been removed in version `11.0.0`, see related release guides (["Reactions 11.0.0"](../release-guides/reactions-v11.mdx), ["EmojiPicker 11.0.0"](../release-guides/emoji-picker-v11.mdx) and ["emojiSearchIndex 11.0.0"](../release-guides/emoji-search-index-v11.mdx)) to adjust your integration to this new change.
129
+
:::
130
+
127
131
-[`ChannelStateContext`](../components/contexts/channel-state-context.mdx) - stateful data (ex: `messages` or `members`)
128
132
-[`ChannelActionContext`](../components/contexts/channel-action-context.mdx) - action handlers (ex: `sendMessage` or `openThread`)
129
133
-[`ComponentContext`](../components/contexts/component-context.mdx) - custom component UI overrides (ex: `Avatar` or `Message`)
130
-
-[`EmojiContext`](../components/contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`)
134
+
-[`EmojiContext`](../components/contexts/emoji-context.mdx) - emoji UI components and data (ex: `EmojiPicker` or `emojiConfig`) - removed in `11.0.0`
131
135
-[`TypingContext`](../components/contexts/typing-context.mdx) - object of currently typing users (i.e., `typing`)
132
136
133
137
### ChannelList
@@ -172,6 +176,14 @@ The [`MessageInput`](../components/message-input-components/message-input.mdx) c
172
176
173
177
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.
174
178
179
+
### Emojis (picker & autocomplete)
180
+
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.
184
+
185
+
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.
186
+
175
187
## Summary
176
188
177
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.
Copy file name to clipboardExpand all lines: docusaurus/docs/React/components/contexts/emoji-context.mdx
+4
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,10 @@ sidebar_position: 5
4
4
title: EmojiContext
5
5
---
6
6
7
+
:::caution
8
+
`EmojiContext` has been removed in version `11.0.0`, see related release guides (["Reactions 11.0.0"](../release-guides/reactions-v11.mdx), ["EmojiPicker 11.0.0"](../release-guides/emoji-picker-v11.mdx) and ["emojiSearchIndex 11.0.0"](../release-guides/emoji-search-index-v11.mdx)) to adjust your integration to this new change.
9
+
:::
10
+
7
11
The `EmojiContext` is established by the `Channel` component and exposes the `useEmojiContext` hook. This context holds
8
12
the UI components and stateful data necessary to render emoji selector functionality.
Custom UI component to override default `NimblePicker` from `emoji-mart`.
333
+
Custom search mechanism instance or object to enable emoji autocomplete. See ["emojiSearchIndex 11.0.0"](../../release-guides/emoji-search-index-v11.mdx) release guide for more information.
334
334
335
-
| Type |
336
-
| --------- |
337
-
| component |
335
+
| Type | Default |
336
+
| ------ | --------- |
337
+
| object | undefined |
338
+
339
+
### EmojiPicker (changed in `11.0.0`)
340
+
341
+
Custom UI component to override default `NimblePicker` from `emoji-mart`. Markup structure changed in `11.0.0`, see ["EmojiPicker 11.0.0"](../../release-guides/emoji-picker-v11.mdx) release guide for more information.
@@ -414,48 +423,50 @@ A custom function to provide size configuration for image attachments
414
423
Allows to prevent triggering the `channel.watch()` (triggers channel query HTTP request) call when mounting the `Channel` component (the default behavior) with uninitialized (`channel.initialized`) `Channel` instance. That means that no channel data from the back-end will be received neither channel WS events will be delivered to the client. Preventing to initialize the channel on mount allows us to postpone the channel creation in the Stream's DB to a later point in time, for example, when a first message is sent:
@@ -123,6 +123,10 @@ Windows 10 does not support country flag emojis out of the box. It chooses to re
123
123
Stream Chat can override this behavior by loading a custom web font that will render images instead (PNGs or SVGs depending
124
124
on the platform). Set this prop to true if you want to use these custom emojis for Windows users.
125
125
126
+
:::caution
127
+
If you're moving from older versions to `11.0.0` then make sure to import related stylesheet from `stream-chat-react/css/v2/emoji-replacement.css` as it has been removed from our main stylesheet to reduce final bundle size for integrators who do not wish to use this feature.
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:
In this example, we will demonstrate how to create a custom Emoji Picker component that can be used in the `MessageInput`.
10
-
This component will replace the default [`EmojiPicker`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EmojiPicker.tsx)
11
-
with only breakfast food emojis.
9
+
:::caution
10
+
Note that this guide is for versions lower than `11.0.0`, the new API has slightly changed. See the ["EmojiPicker 11.0.0"](../../release-guides/emoji-picker-v11.mdx) release guide to help you transition smoothly to the new API.
11
+
:::
12
+
13
+
In this example, we will demonstrate how to create a custom Emoji Picker component that can be used in the `MessageInput`. This component will replace the default [`EmojiPicker`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EmojiPicker.tsx) with only breakfast food emojis.
12
14
13
15
## Choose Your Emojis
14
16
15
-
The default `EmojiPicker` renders individual emoji objects using the [`NimbleEmoji`](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js)
16
-
component from [emoji-mart](https://www.npmjs.com/package/emoji-mart). Our custom set of emojis will need to follow the same `NimbleEmoji` props.
17
-
`NimbleEmoji` accepts an `emoji` prop, which pertains to either an object mapping of the emoji data or simply the ID (for IDs already existing
18
-
in `emoji-mart`). The object mapping of the `emoji` prop has the following type:
17
+
The default `EmojiPicker` renders individual emoji objects using the [`NimbleEmoji`](https://github.com/missive/emoji-mart/blob/v3.0.1/src/components/emoji/nimble-emoji.js) component from [emoji-mart](https://www.npmjs.com/package/emoji-mart). Our custom set of emojis will need to follow the same `NimbleEmoji` props. `NimbleEmoji` accepts an `emoji` prop, which pertains to either an object mapping of the emoji data or simply the ID (for IDs already existing in `emoji-mart`). The object mapping of the `emoji` prop has the following type:
19
18
20
19
```tsx
21
20
exportinterfaceBaseEmoji {
@@ -29,8 +28,7 @@ export interface BaseEmoji {
29
28
}
30
29
```
31
30
32
-
In this example we will use only the ID and select existing emojis. For a more detailed example of how to construct these emoji objects, please see the
33
-
[Reactions Selector and List](../theming/reactions.mdx) section. Below is the array of breakfast emojis we will use:
31
+
In this example we will use only the ID and select existing emojis. For a more detailed example of how to construct these emoji objects, please see the [Reactions Selector and List](../theming/reactions.mdx) section. Below is the array of breakfast emojis we will use:
@@ -43,8 +41,7 @@ loaded into the component library.
43
41
44
42
## Create the Custom Component
45
43
46
-
To construct our component, we will utilize the `EmojiContext` to get our `emojiConfig` data. This config object contains the `emojiData` we need for the
47
-
`data` prop on the `Emoji` component. Using the `onSelectEmoji` method from the `MessageInputContext`, we can add the onClick functionality to our custom picker.
44
+
To construct our component, we will utilize the `EmojiContext` to get our `emojiConfig` data. This config object contains the `emojiData` we need for the `data` prop on the `Emoji` component. Using the `onSelectEmoji` method from the `MessageInputContext`, we can add the onClick functionality to our custom picker.
48
45
49
46
:::note
50
47
The `Emoji` component needs to be wrapped in React's `Suspense` component because it is lazy loaded.
By default - our SDK would ship with `emoji-mart` dependency on top of which our `EmojiPicker` component is built. And since the SDK is using `emoji-mart` for this component - it was also reused for reactions (`ReactionsList` and `ReactionSelector`) and suggestion list (`MessageInput`). This solution proved to be very uncomfortable to work with when it came to replacing either of the mentioned components (or disabling them completely) and the final applications using our SDK would still bundle certain `emoji-mart` parts which weren't needed (or seemingly "disabled") resulting in sub-optimal load times. Maintaining such architecture became a burden so we're switching things a bit.
13
+
14
+
## Changes to the default component composition (architecture)
15
+
16
+
SDK's `EmojiPicker` component now comes as two-part "bundle" - a button and an actual picker element. The component now holds its own `open` state which is handled by clicking the button (or anywhere else to close it).
17
+
18
+
## Switching to opt-in mechanism (BREAKING CHANGE)
19
+
20
+
We made `emoji-mart` package in our SDK completely optional which means that `EmojiPicker` component is now disabled by default.
21
+
22
+
### Reinstate the `EmojiPicker` component
23
+
24
+
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:
### Build your custom `EmojiPicker` (with example)
44
+
45
+
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:
textareaRef.current?.focus(); // returns focus back to the message input element
65
+
}}
66
+
/>
67
+
)}
68
+
</>
69
+
);
70
+
};
71
+
72
+
// and pass it down to the `Channel` component
73
+
```
74
+
75
+
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 <GHComponentLinktext="EmojiPicker"branch="feat/emoji-picker-delete"as="code"path="/Emojis/EmojiPicker.tsx" /> component which comes with the SDK for inspiration.
76
+
77
+
## Old `emoji-mart` (v3.0.1)
78
+
79
+
Even though it's not explicitly provided by our SDK anymore, it's still possible for our integrators to use older version of the `emoji-mart` - specifically version `3.0.1` on top of which our old components were built. We don't recommend using old version of the `emoji-mart` but if you really need to, follow the [`3.0.1` documentation](https://github.com/missive/emoji-mart/tree/v3.0.1#picker) in combination with the previous guide to build your own `EmojiPicker` component with the old `emoji-mart` API. Beware though, if you wish to use slightly modified `emoji-mart` CSS previously supplied by our SDK by default in the main `index.css` file, you'll now have to explicitly import it:
0 commit comments