#### React
```
import { useMessages } from '@ably/chat/react';
const MyComponent = () => {
const { sendMessage, history } = useMessages({
listener: (event) => {
console.log('New message:', event.message.text);
},
});
return ;
};
```
This hook must be used within a [`ChatRoomProvider`](https://ably.com/docs/chat/api/react/providers.md#chatRoomProvider).
## Parameters
The `useMessages` hook accepts an optional configuration object:
### React
```
import { ChatMessageEventType, OrderBy, MessageReactionType } from '@ably/chat';
import { useMessages } from '@ably/chat/react';
import { useState, useCallback } from 'react';
function ChatMessages() {
const [messages, setMessages] = useState([]);
const { sendMessage, updateMessage, deleteMessage, history, sendReaction } = useMessages({
listener: (event) => {
setMessages((prev) => {
switch (event.type) {
case ChatMessageEventType.Created:
return [...prev, event.message];
case ChatMessageEventType.Updated:
case ChatMessageEventType.Deleted:
return prev.map((msg) =>
msg.serial === event.message.serial ? msg.with(event) : msg
);
default:
return prev;
}
});
},
reactionsListener: (event) => {
setMessages((prev) =>
prev.map((msg) =>
msg.serial === event.messageSerial
? msg.with(event)
: msg
)
);
},
});
const loadHistory = useCallback(async () => {
const result = await history({ limit: 50, orderBy: OrderBy.OldestFirst });
setMessages(result.items);
}, [history]);
const handleSend = useCallback(async (text) => {
await sendMessage({ text });
}, [sendMessage]);
const handleReact = useCallback(async (serial, emoji) => {
await sendReaction(serial, { name: emoji, type: MessageReactionType.Distinct });
}, [sendReaction]);
return (
{messages.map((msg) => (
{msg.clientId}: {msg.text}
))}
);
}
```
## Related Topics
- [Providers](https://ably.com/docs/chat/api/react/providers.md): API reference for the ChatClientProvider and ChatRoomProvider components in the Ably Chat React SDK.
- [useChatClient](https://ably.com/docs/chat/api/react/use-chat-client.md): API reference for the useChatClient hook in the Ably Chat React SDK.
- [useChatConnection](https://ably.com/docs/chat/api/react/use-chat-connection.md): API reference for the useChatConnection hook in the Ably Chat React SDK.
- [useRoom](https://ably.com/docs/chat/api/react/use-room.md): API reference for the useRoom hook in the Ably Chat React SDK.
- [usePresence](https://ably.com/docs/chat/api/react/use-presence.md): API reference for the usePresence hook in the Ably Chat React SDK.
- [usePresenceListener](https://ably.com/docs/chat/api/react/use-presence-listener.md): API reference for the usePresenceListener hook in the Ably Chat React SDK.
- [useOccupancy](https://ably.com/docs/chat/api/react/use-occupancy.md): API reference for the useOccupancy hook in the Ably Chat React SDK.
- [useTyping](https://ably.com/docs/chat/api/react/use-typing.md): API reference for the useTyping hook in the Ably Chat React SDK.
- [useRoomReactions](https://ably.com/docs/chat/api/react/use-room-reactions.md): API reference for the useRoomReactions hook in the Ably Chat React SDK.
## Documentation Index
To discover additional Ably documentation:
1. Fetch [llms.txt](https://ably.com/llms.txt) for the canonical list of available pages.
2. Identify relevant URLs from that index.
3. Fetch target pages as needed.
Avoid using assumed or outdated documentation paths.