✨ Expose client only if it is connected

example/src/App.js

@@ -72,15 +72,21 @@ export function SendingMessages() {
 
   //Get Instance of StompClient
   //This is the StompCLient from @stomp/stompjs
+  //Note: This will be undefined if the client is currently not connected
   const stompClient = useStompClient();
   useSubscription("/user/queue/echoreply", (message) => setLastMessage(message.body));
 
   const sendMessage = () => {
-    //Send Message
-    stompClient.publish({
-      destination: "/app/echo",
-      body: "Echo " + input
-    });
+    if(stompClient) {
+      //Send Message
+      stompClient.publish({
+        destination: "/app/echo",
+        body: "Echo " + input
+      });
+    }
+    else {
+      //Handle error
+    }
   };
 
   return (

src/components/StompSessionProvider.tsx

@@ -55,6 +55,14 @@ function StompSessionProvider(props: StompSessionProviderProps) {
           value.headers
         );
       });
+
+      setClient(_client);
+    };
+
+    _client.onWebSocketClose = function (event) {
+      if (stompOptions.onWebSocketClose) stompOptions.onWebSocketClose(event);
+
+      setClient(undefined);
     };
 
     if (!stompOptions.onStompError) {
@@ -64,7 +72,6 @@ function StompSessionProvider(props: StompSessionProviderProps) {
     }
 
     _client.activate();
-    setClient(_client);
 
     return () => {
       _client.deactivate();

src/hooks/useStompClient.tsx

@@ -4,6 +4,7 @@ import { StompSessionProviderContext } from '../interfaces/StompSessionProviderC
 
 /**
  * Returns the Stomp Client from @stomp/stompjs
+ * This will be undefined if the client is currently not connected
  */
 function useStompClient() {
   const context = useContext<StompSessionProviderContext | undefined>(