useChatClient
The useChatClient hook provides access to the clientId of the ChatClient instance supplied by the ChatClientProvider. It automatically monitors the clientId and refreshes when connection state transitions to Connected.
React
1
2
3
4
5
6
import { useChatClient } from '@ably/chat/react';
const MyComponent = () => {
const { clientId } = useChatClient();
return <p>Connected as: {clientId}</p>;
};This hook must be used within a ChatClientProvider.
Returns
The useChatClient hook returns an object with the following properties:
clientIdString or UndefinedThe current client identifier. Available immediately when using an Ably API key, but unavailable until a successful server connection when using token authentication. Monitor the connection status to determine connection readiness.
Example
React
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { useChatClient, useChatConnection } from '@ably/chat/react';
function UserStatus() {
const { clientId } = useChatClient();
const { currentStatus } = useChatConnection();
if (!clientId) {
return <p>Connecting...</p>;
}
return (
<div>
<p>Logged in as: {clientId}</p>
<p>Connection status: {currentStatus}</p>
</div>
);
}