> ## 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.

# React Hooks

Ably Chat provides a set of custom React hooks that integrate seamlessly with React applications. These hooks manage the state and lifecycle of chat features, making it simple to build reactive chat interfaces that automatically update when new messages arrive or user presence changes.

## Available Hooks

The Ably Chat SDK provides the following React hooks:

### Connection Hooks

* **useChatConnection** - Monitor and manage the connection status to Ably

### Room Hooks

* **useRoom** - Access and control room attachment and status

### Message Hooks

* **useMessages** - Send, receive, update, and delete messages in a room

### Presence Hooks

* **usePresence** - Enter, update, and leave presence in a room
* **usePresenceListener** - Subscribe to presence events in a room

### Typing Indicator Hooks

* **useTyping** - Start and stop typing indicators in a room

### Reaction Hooks

* **useRoomReactions** - Send and receive room-level reactions

### Occupancy Hooks

* **useOccupancy** - Monitor room occupancy (connection and presence counts)

## Usage Example

Here's an example of using multiple hooks together:

<Code>
  ```react theme={null}
  import { useState } from 'react';
  import {
    useChatConnection,
    useMessages,
    usePresence,
    useTyping,
  } from '@ably/chat/react';

  function ChatComponent() {
    const [inputValue, setInputValue] = useState('');
    const [messages, setMessages] = useState([]);

    // Monitor connection status
    const { currentStatus } = useChatConnection();

    // Handle messages
    const { sendMessage } = useMessages({
      listener: (event) => {
        if (event.type === 'message.created') {
          setMessages((prev) => [...prev, event.message]);
        }
      },
    });

    // Manage presence
    const { myPresenceState } = usePresence({
      initialData: { status: 'online' },
    });

    // Handle typing indicators
    const { keystroke, stop, currentlyTyping } = useTyping();

    const handleSend = () => {
      if (inputValue.trim()) {
        sendMessage({ text: inputValue });
        setInputValue('');
        stop(); // Stop typing indicator
      }
    };

    const handleInputChange = (e) => {
      setInputValue(e.target.value);
      if (e.target.value) {
        keystroke(); // Send typing indicator
      } else {
        stop();
      }
    };

    return (
      <div>
        <div>Status: {currentStatus}</div>
        <div>Presence: {myPresenceState.present ? 'Online' : 'Offline'}</div>
        
        <div>
          {messages.map((msg) => (
            <div key={msg.serial}>{msg.text}</div>
          ))}
        </div>

        {currentlyTyping.size > 0 && (
          <div>Typing: {Array.from(currentlyTyping).join(', ')}</div>
        )}

        <input
          value={inputValue}
          onChange={handleInputChange}
          placeholder="Type a message..."
        />
        <button onClick={handleSend}>Send</button>
      </div>
    );
  }
  ```
</Code>

## Hook Features

All Ably Chat hooks provide:

* **Automatic lifecycle management** - Hooks automatically handle subscription and cleanup
* **TypeScript support** - Full type definitions for all hooks and their parameters
* **Error handling** - Errors are exposed via the hook's return values
* **Status monitoring** - Access to connection and room status from within feature hooks

## Next Steps

* Explore the [React UI Kit](/docs/chat/react/ui-kit) for pre-built components
* Learn about [messages](/docs/chat/rooms/messages?lang=react)
* Understand [presence](/docs/chat/rooms/presence?lang=react)
* Check out the [getting started guide](/docs/chat/getting-started/react)