feat(Reactions): add reactionOptions to ComponentContext

src/components/Channel/Channel.tsx

@@ -86,6 +86,10 @@ import {
   getImageAttachmentConfiguration,
   getVideoAttachmentConfiguration,
 } from '../Attachment/attachment-sizing';
+import {
+  defaultReactionOptions,
+  ReactionOptions,
+} from '../../components/Reactions/reactionOptions';
 
 export type ChannelProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -195,6 +199,8 @@ export type ChannelProps<
   QuotedMessage?: ComponentContextValue<StreamChatGenerics>['QuotedMessage'];
   /** Custom UI component to override the message input's quoted message preview, defaults to and accepts same props as: [QuotedMessagePreview](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/QuotedMessagePreview.tsx) */
   QuotedMessagePreview?: ComponentContextValue<StreamChatGenerics>['QuotedMessagePreview'];
+  /** Custom reaction options to be applied to ReactionSelector, ReactionList and SimpleReactionList components */
+  reactionOptions?: ReactionOptions;
   /** Custom UI component to display the reaction selector, defaults to and accepts same props as: [ReactionSelector](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionSelector.tsx) */
   ReactionSelector?: ComponentContextValue<StreamChatGenerics>['ReactionSelector'];
   /** Custom UI component to display the list of reactions on a message, defaults to and accepts same props as: [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) */
@@ -889,6 +895,7 @@ const ChannelInner = <
       PinIndicator: props.PinIndicator,
       QuotedMessage: props.QuotedMessage,
       QuotedMessagePreview: props.QuotedMessagePreview,
+      reactionOptions: props.reactionOptions ?? defaultReactionOptions,
       ReactionSelector: props.ReactionSelector,
       ReactionsList: props.ReactionsList,
       SendButton: props.SendButton,
@@ -899,7 +906,7 @@ const ChannelInner = <
       TypingIndicator: props.TypingIndicator,
       VirtualMessage: props.VirtualMessage,
     }),
-    [],
+    [props.reactionOptions],
   );
 
   const emojiContextValue: EmojiContextValue = useMemo(

src/components/Reactions/ReactionSelector.tsx

@@ -11,7 +11,7 @@ import { useMessageContext } from '../../context/MessageContext';
 import type { ReactionResponse } from 'stream-chat';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { defaultReactionOptions, ReactionOptions } from './reactionOptions';
+import type { ReactionOptions } from './reactionOptions';
 
 export type ReactionSelectorProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -46,16 +46,21 @@ const UnMemoizedReactionSelector = React.forwardRef(
       latest_reactions: propLatestReactions,
       own_reactions: propOwnReactions,
       reaction_counts: propReactionCounts,
-      reactionOptions = defaultReactionOptions,
+      reactionOptions: propReactionOptions,
       reverse = false,
     } = props;
 
-    const { Avatar: contextAvatar } = useComponentContext<StreamChatGenerics>('ReactionSelector');
+    const {
+      Avatar: contextAvatar,
+      reactionOptions: contextReactionOptions,
+    } = useComponentContext<StreamChatGenerics>('ReactionSelector');
     const {
       handleReaction: contextHandleReaction,
       message,
     } = useMessageContext<StreamChatGenerics>('ReactionSelector');
 
+    const reactionOptions = propReactionOptions ?? contextReactionOptions;
+
     const Avatar = propAvatar || contextAvatar || DefaultAvatar;
     const handleReaction = propHandleReaction || contextHandleReaction;
     const latestReactions = propLatestReactions || message?.latest_reactions || [];

src/components/Reactions/StreamEmoji.tsx

@@ -15,7 +15,7 @@ const StreamSpriteEmojiPositions = {
 
 type StreamEmojiType = keyof typeof StreamSpriteEmojiPositions;
 
-export const STREAM_SPRITE_URL = 'https://getstream.imgix.net/images/emoji-sprite.png';
+const STREAM_SPRITE_URL = 'https://getstream.imgix.net/images/emoji-sprite.png';
 
 export const StreamEmoji = ({
   fallback,

src/components/Reactions/hooks/useProcessReactions.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
-import { useMessageContext } from '../../../context';
-import { defaultReactionOptions } from '../reactionOptions';
+import { useComponentContext, useMessageContext } from '../../../context';
 
 import type { ReactionsListProps } from '../ReactionsList';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
@@ -22,11 +21,15 @@ export const useProcessReactions = <
   const {
     own_reactions: propOwnReactions,
     reaction_counts: propReactionCounts,
-    reactionOptions = defaultReactionOptions,
+    reactionOptions: propReactionOptions,
     reactions: propReactions,
   } = params;
-  const { message } = useMessageContext<StreamChatGenerics>('ReactionsList');
+  const { message } = useMessageContext<StreamChatGenerics>('useProcessReactions');
+  const { reactionOptions: contextReactionOptions } = useComponentContext<StreamChatGenerics>(
+    'useProcessReactions',
+  );
 
+  const reactionOptions = propReactionOptions ?? contextReactionOptions;
   const latestReactions = propReactions || message.latest_reactions || [];
   const ownReactions = propOwnReactions || message?.own_reactions || [];
   const reactionCounts = propReactionCounts || message.reaction_counts || {};

src/context/ComponentContext.tsx

@@ -33,13 +33,15 @@ import type { TypingIndicatorProps } from '../components/TypingIndicator/TypingI
 
 import type { CustomTrigger, DefaultStreamChatGenerics, UnknownType } from '../types/types';
 import type { CooldownTimerProps } from '../components';
+import type { ReactionOptions } from '../components/Reactions/reactionOptions';
 
 export type ComponentContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
   V extends CustomTrigger = CustomTrigger
 > = {
   Attachment: React.ComponentType<AttachmentProps<StreamChatGenerics>>;
   Message: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>;
+  reactionOptions: ReactionOptions;
   AutocompleteSuggestionHeader?: React.ComponentType<SuggestionListHeaderProps>;
   AutocompleteSuggestionItem?: React.ComponentType<SuggestionItemProps<StreamChatGenerics>>;
   AutocompleteSuggestionList?: React.ComponentType<SuggestionListProps<StreamChatGenerics>>;