> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ably/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Room Reactions

Users can send reactions to the entire chat room to show their sentiment as to what is happening. For example, agreeing with the content in a livestream using a thumbs up, or sending a heart when their team scores in a sports game.

Room reactions are ephemeral and not stored or aggregated by Ably.

## Subscribe to Room Reactions

<Tabs>
  <Tab name="JavaScript">
    <Code>
      ```javascript theme={null}
      const {unsubscribe} = room.reactions.subscribe((event) => {
        const reaction = event.reaction;
        console.log(`Received a reaction from ${reaction.clientId} with name ${reaction.name}`);
      });
      ```
    </Code>
  </Tab>

  <Tab name="React">
    <Code>
      ```react theme={null}
      import { useRoomReactions } from '@ably/chat/react';

      const MyComponent = () => {
        useRoomReactions({
          listener: (reactionEvent) => {
            console.log('Received reaction: ', reactionEvent.reaction);
          },
        });

        return <div>Room Reactions Component</div>;
      };
      ```
    </Code>
  </Tab>

  <Tab name="Swift">
    <Code>
      ```swift theme={null}
      let reactionSubscription = room.reactions.subscribe()
      for await event in reactionSubscription {
        print("Received a reaction of name \(event.reaction.name)")
      }
      ```
    </Code>
  </Tab>

  <Tab name="Android / Kotlin">
    <Code>
      ```android theme={null}
      import com.ably.chat.Room
      import com.ably.chat.RoomReactionEvent

      @Composable
      fun RoomReactionsComponent(room: Room) {
        LaunchedEffect(room) {
          room.reactions.asFlow().collect { event: RoomReactionEvent ->
            println("Received a reaction of name ${event.reaction.name}")
          }
        }
      }
      ```
    </Code>
  </Tab>
</Tabs>

## Send a Room Reaction

<Tabs>
  <Tab name="JavaScript">
    <Code>
      ```javascript theme={null}
      await room.reactions.send({name: "like"});
      await room.reactions.send({name: "heart", metadata: {"effect": "fireworks"}});
      ```
    </Code>
  </Tab>

  <Tab name="React">
    <Code>
      ```react theme={null}
      import { useRoomReactions } from '@ably/chat/react';

      const MyComponent = () => {
        const { sendRoomReaction } = useRoomReactions();

        const sendLike = () => {
          sendRoomReaction({ name: 'like' });
        };

        return (
          <div>
            <button onClick={sendLike}>Send Like</button>
          </div>
        );
      };
      ```
    </Code>
  </Tab>

  <Tab name="Swift">
    <Code>
      ```swift theme={null}
      try await room.reactions.send(params: .init(name: "like"))
      try await room.reactions.send(params: .init(name: "heart", metadata: ["effect": "fireworks"]))
      ```
    </Code>
  </Tab>

  <Tab name="Android / Kotlin">
    <Code>
      ```android theme={null}
      import com.ably.chat.Room
      import com.ably.chat.json.*
      import kotlinx.coroutines.launch

      @Composable
      fun SendReactionComponent(room: Room) {
        val coroutineScope = rememberCoroutineScope()

        Button(onClick = {
          coroutineScope.launch {
            room.reactions.send(name = "like")
          }
        }) {
          Text("Send Like")
        }
      }
      ```
    </Code>
  </Tab>
</Tabs>

## Next Steps

* Learn about [room occupancy](/docs/chat/rooms/occupancy)
* Explore [messages](/docs/chat/rooms/messages)
* Understand [presence](/docs/chat/rooms/presence)