fix: forward StreamChat constructor options via useCreateChatClient (#2463)

Author: MartinCupela

docusaurus/docs/React/basics/getting-started.mdx

@@ -144,7 +144,40 @@ body,
 
 ## Chat Client & Connecting User
 
-To communicate with the Stream Chat API the SDK requires a client with an established connection. The hook mentioned in the code above (`useCreateChatClient`) handles client instantiation, establishes proper connection and handles cleanups and disconnects for you. If you wish to have more control over how all of the previously mentioned is being handled see [Client and User](../guides/client-and-user.mdx) guide.
+To communicate with the Stream Chat API the SDK requires a client with an established connection. The hook mentioned in the code above (`useCreateChatClient`) handles client instantiation, establishes proper connection and handles cleanups and disconnects for you. If you wish to have more control over how all the previously mentioned is being handled see [Client and User](../guides/client-and-user.mdx) guide.
+
+:::important
+The hook `useCreateChatClient` accepts parameter `options`. This is an object forwarded to the `StreamChat` constructor. Please make sure the `options` object is created outside the scope of the component invoking `useCreateChatClient` to prevent unnecessary re-renders and thus reconnects.
+
+```
+import {
+  Chat,
+  StreamChatOptions,
+  useCreateChatClient,
+} from 'stream-chat-react';
+
+const streamChatOptions: StreamChatOptions = {
+  timeout: 6000
+}
+
+const App = () => {
+  const client = useCreateChatClient({
+    apiKey,
+    options: streamChatOptions,
+    tokenOrProvider: token,
+    userData: { id: userId },
+  });
+
+  if (!client) return <div>Loading...</div>;
+
+  return (
+    <Chat client={client}>
+    </Chat>
+  );
+}
+```
+
+:::
 
 ## Creating a Channel
 

src/components/Chat/hooks/useCreateChatClient.ts

@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
 
-import {
+import { StreamChat } from 'stream-chat';
+
+import type {
   DefaultGenerics,
   ExtendableGenerics,
   OwnUserResponse,
-  StreamChat,
+  StreamChatOptions,
   TokenOrProvider,
   UserResponse,
 } from 'stream-chat';
@@ -14,12 +16,14 @@ import {
  */
 export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGenerics>({
   apiKey,
+  options,
   tokenOrProvider,
   userData,
 }: {
   apiKey: string;
   tokenOrProvider: TokenOrProvider;
   userData: OwnUserResponse<SCG> | UserResponse<SCG>;
+  options?: StreamChatOptions;
 }) => {
   const [chatClient, setChatClient] = useState<StreamChat<SCG> | null>(null);
   const [cachedUserData, setCachedUserData] = useState(userData);
@@ -29,7 +33,7 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
   }
 
   useEffect(() => {
-    const client = new StreamChat<SCG>(apiKey);
+    const client = new StreamChat<SCG>(apiKey, undefined, options);
     let didUserConnectInterrupt = false;
 
     const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
@@ -45,7 +49,7 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
           console.log(`Connection for user "${cachedUserData.id}" has been closed`);
         });
     };
-  }, [apiKey, cachedUserData, tokenOrProvider]);
+  }, [apiKey, cachedUserData, options, tokenOrProvider]);
 
   return chatClient;
 };