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:

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 for pre-built components
• Learn about messages
• Understand presence
• Check out the getting started guide