tmp

docusaurus/docs/React/release-guides/new-reactions.mdx

@@ -27,9 +27,9 @@ export const customReactions = [
 ];
 ```
 
-## Default setup and how it works
+## New default setup and how it works
 
-SDK by default comes with six reaction types (`angry`, `haha`, `like`, `love`, `sad` and `wow`) which are rendered by [`StreamEmoji`]() component which utilises sprite sheet system and renders images for each reaction to make sure it works flawlessly on every system. Default reaction options are defined in [`defaultReactionOptions`]() and these options are reused for both [`ReactionSelector`]() and [`ReactionList`]() (as well as [`SimpleReactionList`]()). These options come by default from the ComponentContext but local component property will be prioritised if defined:
+SDK by default comes with six reaction types (`angry`, `haha`, `like`, `love`, `sad` and `wow`) which are newly rendered by [`StreamEmoji`]() component which utilises sprite sheet system and renders images for each reaction to make sure it works flawlessly on every system. Default reaction options are defined in [`defaultReactionOptions`]() and these options are reused for both [`ReactionSelector`]() and [`ReactionsList`]() (as well as [`SimpleReactionsList`]()). These options come by default from the ComponentContext but local component property will be prioritised if defined:
 
 ```ts
 contextReactionOptions = defaultReactionOptions;
@@ -42,23 +42,37 @@ const reactionOptions = propsReactionOptions ?? contextReactionOptions;
 It's possible to supply your own reaction types and components to represent such reactions - let's implement reaction of type `rick_roll` to render a Rick Roll GIF:
 
 ```tsx
-// mention custom types and components here
+import { Channel } from 'stream-chat-react';
 
-const CustomReactionSelector = forwardRef((props, ref) => (
-  <ReactionSelector {...props} ref={ref} reactionOptions={selectorReactions} />
-));
+const RickRollReaction = () => (
+  <img src='https://media.tenor.com/x8v1oNUOmg4AAAAM/rickroll-roll.gif' style={{ height: 20 }} />
+);
 
-const CustomReactionsList = (props) => <ReactionsList {...props} reactionOptions={listReactions} />;
+const customReactionOptions = [
+  {
+    Component: RickRollReaction,
+    type: 'rick_roll',
+    name: 'Rick Roll',
+  },
+];
+```
+
+And then you can pass these newly created options to [`Channel`]() component which will be then propagated to [`ReactionSelector`]() and [`ReactionsList`]():
+
+```tsx
+<Channel reactionOptions={customReactionOptions}>{/*...*/}</Channel>
 ```
 
 ## EmojiMart integration
 
 If you're used to work with EmojiMart then integrating with new reaction system shouldn't be a big trouble as you can define how your components look and reach for context if you need to - after all, it's just components.
 
 ```tsx
+import { useEmojiMartContext } from '../contexts';
+
 const CustomLikeComponent = () => {
   // arbitrary EmojiMartContext (does not come with the SDK)
-  const { selectedSkinTones, selectedSet } = useMyEmojiMartContext();
+  const { selectedSkinTones, selectedSet } = useEmojiMartContext();
 
   return <em-emoji id='+1' set={selectedSet} skin={selectedSkinTones['+1']} />;
 };
@@ -71,12 +85,27 @@ const reactionOptions = [
   },
 ];
 
-// pass reaction options to either ReactionSelector or ReactionList or component context (Channel)
+// pass reaction options to either ReactionSelector or ReactionsList or component context (Channel)
 ```
 
-## Use of different components for the same reaction types for ReactionSelector and ReactionList components
+## Use of different reaction components for the same reaction types for `ReactionSelector` and `ReactionsList` components
 
-Either for small changes like this:
+If you need more fine-grain tuning and want to - for example - enable only a certain subset of clickable reactions but want to display the full set then you'd do something like this:
+
+```tsx
+// subset of clickable options available to the user
+const selectedReactionOptions = [{ type: 'haha' /* ... */ }, { type: 'cat' /* ... */ }];
+
+// set of all available options to be rendered
+const completeReactionOptions = [
+  { type: 'haha' /* ... */ },
+  { type: 'cat' /* ... */ },
+  { type: '+1' /* ... */ },
+  { type: 'smile' /* ... */ },
+];
+```
+
+Or if you just want bigger icons for [`ReactionsList`]() while [`ReactionSelector`]() uses regular:
 
 ```tsx
 const selectorReactionOptions = [
@@ -97,19 +126,27 @@ const listReactionOptions = [
 ];
 ```
 
-Or completely adjusted sets:
+You can then apply these new options to `ReactionSelector` and `ReactionsList` directly:
 
 ```tsx
-// subset of clickable options available to the user
-const selectedReactionOptions = [{ type: 'haha' /* ... */ }, { type: 'cat' /* ... */ }];
+import { ReactionSelector, ReactionsList, Channel } from 'stream-chat-react';
 
-// set of all available options to be rendered
-const completeReactionOptions = [
-  { type: 'haha' /* ... */ },
-  { type: 'cat' /* ... */ },
-  { type: '+1' /* ... */ },
-  { type: 'smile' /* ... */ },
-];
+// ReactionSelector requires its reference to be forwarded
+const CustomReactionSelector = forwardRef((props, ref) => (
+  <ReactionSelector {...props} ref={ref} reactionOptions={selectorReactionOptions} />
+));
+
+const CustomReactionsList = (props) => (
+  <ReactionsList {...props} reactionOptions={listReactionOptions} />
+);
+```
+
+And then pass them down to `Channel` component:
+
+```tsx
+<Channel ReactionSelector={CustomReactionSelector} ReactionsList={CustomReactionsList}>
+  {/*...*/}
+</Channel>
 ```
 
 ## Order ranking (coming from custom context)
@@ -121,14 +158,18 @@ const completeReactionOptions = [
 The transition is super easy:
 
 ```tsx
-// old options
+import { defaultReactionOptions } from 'stream-chat-react';
+
+// old custom options
 const reactionOptions = [{ id: 'bulb' /* ...extra properties... */ }, { id: '+1' }, { id: 'joy' }];
 
 // would newly become
 const newReactionOptions = [
   { type: 'bulb', Component: () => <>💡</>, name: 'Bulb reaction' },
   { type: '+1', Component: () => <>👍</> },
   { type: 'joy', Component: () => <>🤣</>, name: 'ROFL' },
+  // reuse default ones if you want to
+  ...defaultReactionOptions,
 ];
 ```