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>
);
}