Function useRoom

useRoom(params?: UseRoomParams): UseRoomResponse

React hook that provides access to room information and basic room operations.

Typically, you won't need to call attach() or detach() manually since the ChatRoomProvider handles room lifecycle automatically.

Note: This hook must be used within a ChatRoomProvider component tree.

Parameters

Optionalparams: UseRoomParams
Optional parameters for status change callbacks

Returns UseRoomResponse

A UseRoomResponse containing room data and operations

Throws

An Ably.ErrorInfo with ReactHookMustBeUsedWithinProvider When used outside of a ChatRoomProvider

Example: Basic usage

import React from 'react';
import { ChatClient } from '@ably/chat';
import {
  ChatClientProvider,
  ChatRoomProvider,
  useRoom
} from '@ably/chat/react';

// Component that displays room information
const RoomInfo = () => {
  const { roomName, roomStatus, connectionStatus } = useRoom({
    onStatusChange: (change) => {
      console.log(`Room status changed from ${change.previous} to ${change.current}`);
    },
    onConnectionStatusChange: (change) => {
      console.log(`Connection changed from ${change.previous} to ${change.current}`);
    }
  });

  return (
    <div>
      <div>Room: {roomName}</div>
      <div>Status: {roomStatus}</div>
      <div>Connection: {connectionStatus}</div>
    </div>
  );
};

const chatClient: ChatClient; // existing ChatClient instance

// App component with providers
const App = () => {
  return (
    <ChatClientProvider client={chatClient}>
      <ChatRoomProvider name="general-chat">
        <RoomInfo />
      </ChatRoomProvider>
    </ChatClientProvider>
  );
};

export default App;