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 { ChatClient } from '@ably/chat';
import { ChatClientProvider } from '@ably/chat/react';
// Create client outside React to avoid recreating on re-renders
const realtime = new Ably.Realtime({ key: 'your-api-key', clientId: 'user-123' });
const chatClient = new ChatClient(realtime);
const App = () => {
return (
<ChatClientProvider client={chatClient}>
<MyChatApp />
</ChatClientProvider>
);
};
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.
Important: The
clientshould be memoized to prevent unnecessary context updates. Ideally, the ChatClient and its underlying Ably.Realtime client should be created outside of React components to avoid duplicate connections.