The props for the ChatClientProvider component
Props for the ChatClientProvider component.
Optionalchildren?: ReactNode | ReactNode[]The child components to be rendered within this provider.
An instance of the ChatClient to be used in the provider.
A React element that provides the chat client context to its children
import * as Ably from 'ably';
import React, { useMemo } from 'react';
import { ChatClient } from '@ably/chat';
import { ChatClientProvider, useChatClient } from '@ably/chat/react';
// Child component that uses chat functionality
const ChatComponent = () => {
const { clientId } = useChatClient();
return <div>Connected as: {clientId}</div>;
};
const chatClient: ChatClient; // existing ChatClient instance
// Main app component with provider
const App = () => {
return (
<ChatClientProvider client={chatClient}>
<ChatComponent />
</ChatClientProvider>
);
};
export default App;
Returns a React component that provides a ChatClient in a React context to the component subtree. Updates the context value when the client prop changes.
The provider manages room reference counting internally and will only detach rooms when no more references exist.
Important: The
clientprop should be memoized to prevent unnecessary context updates. Ideally, create the ChatClient and its underlying Ably.Realtime client outside of React components to avoid duplicate connections and ensure stable references.Note: All chat-related hooks must be used within this provider's component tree.