A UseChatClientResponse containing the current client ID
An Ably.ErrorInfo When used outside of a ChatClientProvider
import * as Ably from 'ably';
import React from 'react';
import { ChatClient } from '@ably/chat';
import { ChatClientProvider, useChatClient } from '@ably/chat/react';
// Component that displays current user information
const UserInfo = () => {
const { clientId } = useChatClient();
return (<p>Connected as: {clientId}</p>);
};
const chatClient: ChatClient; // existing ChatClient instance
// App component with provider
const App = () => {
return (
<ChatClientProvider client={chatClient}>
<UserInfo />
</ChatClientProvider>
);
};
export default App;
React hook to access the chat client provided by the current ChatClientProvider.
This hook automatically tracks the clientId and updates when connection state changes, ensuring the most current client ID is always available. The client ID may change when the underlying Ably Realtime client reconnects with different authentication.
Note: This hook must be used within a ChatClientProvider component tree.