Optionalparams: UseRoomReactionsParamsOptional parameters for event listeners and room status callbacks
A UseRoomReactionsResponse containing room reaction methods and status
An Ably.ErrorInfo with ReactHookMustBeUsedWithinProvider When used outside of a ChatRoomProvider
import React from 'react';
import { ChatClient, RoomReactionEvent } from '@ably/chat';
import {
ChatClientProvider,
ChatRoomProvider,
useRoomReactions
} from '@ably/chat/react';
// Component that handles room reactions
const RoomReactionHandler = () => {
const { sendRoomReaction } = useRoomReactions({
listener: (reactionEvent: RoomReactionEvent) => {
console.log('Room reaction received:', reactionEvent.reaction.name, " from ", reactionEvent.reaction.clientId);
}
});
const handleSendRoomReaction = async (name: string) => {
try {
await sendRoomReaction({ name });
console.log(`Sent ${name} reaction`);
} catch (error) {
console.error('Failed to send reaction:', error);
}
};
return (
<div>
<button onClick={() => handleSendRoomReaction('👏')}>👏 Clap</button>
<button onClick={() => handleSendRoomReaction('🎉')}>🎉 Celebrate</button>
</div>
);
};
const chatClient: ChatClient; // existing ChatClient instance
// App component with providers
const App = () => {
return (
<ChatClientProvider client={chatClient}>
<ChatRoomProvider name="event-room">
<RoomReactionHandler />
</ChatRoomProvider>
</ChatClientProvider>
);
};
export default App;
React hook that provides access to room reaction functionality.
This hook allows you to send reactions to the room (not to specific messages) and subscribe to room reaction events. Room reactions are ephemeral messages (not persisted) that all room participants can see, such as applause, cheers, or other real-time feedback.
Note: