chore: Add multi provider example

example/src/App.jsx

@@ -62,7 +62,8 @@ export function App() {
             <Typography>
               Note that, because the components are unmounted when the accordion
               is unexpanded, all subscriptions are removed when you close the
-              accordion.
+              accordion. You can furthermore globally enable/disable the
+              connection using the checkbox in the bottom right.
             </Typography>
           </CardContent>
         </Card>
@@ -78,6 +79,9 @@ export function App() {
         <Showcase title={"Dynamic subscribing/unsubscribing"}>
           <DynamicSubscription />
         </Showcase>
+        <Showcase title={"Multiple Providers"}>
+          <MultipleProviders />
+        </Showcase>
       </Container>
     </StompSessionProvider>
   );
@@ -233,6 +237,84 @@ export function DynamicSubscription() {
   );
 }
 
+export function MultipleProviders() {
+  //To allow for multiple STOMP connections, you can nest StompSessionProviders and specify a name for each
+  //Each child component can then specify which provider to use, by passing the name prop to the hooks or HOCs
+  return (
+    <StompSessionProvider
+      url={"https://stream.elite12.de/api/sock"}
+      name={"nested-1"}
+    >
+      <StompSessionProvider
+        url={"https://stream.elite12.de/api/sock"}
+        name={"nested-2"}
+      >
+        <StompSessionProvider
+          url={"https://stream.elite12.de/api/sock"}
+          name={"nested-3"}
+        >
+          {/* An empty name, or a name of "default" will use the default provider */}
+          <MultipleProviderChild />
+          <MultipleProviderChild name={"nested-1"} />
+          <MultipleProviderChild name={"nested-2"} />
+          <MultipleProviderChild name={"nested-3"} />
+        </StompSessionProvider>
+      </StompSessionProvider>
+    </StompSessionProvider>
+  );
+}
+
+function MultipleProviderChild(props) {
+  //All hooks and HOCs can optionally be passed a name argument to specify which provider to use
+  const stompClient = useStompClient(props.name);
+  useSubscription(
+    "/user/queue/echoreply", //The destination to subscribe to
+    (message) => setLastMessage(message.body), //The handler for the message
+    undefined, //No custom headers
+    props.name, //Specify the provider to use
+  );
+
+  const [input, setInput] = useState("");
+  const [lastMessage, setLastMessage] = useState("No message received yet");
+
+  const sendMessage = () => {
+    if (stompClient) {
+      //Send Message
+      stompClient.publish({
+        destination: "/app/echo",
+        body: "Echo " + input,
+      });
+    }
+  };
+
+  return (
+    <>
+      <Typography variant="h6" mb={2}>
+        Provider Name: {props.name || "default"}
+      </Typography>
+      <Grid container direction="row" spacing={3} mb={5}>
+        <Grid item>
+          <Button variant={"contained"} onClick={sendMessage}>
+            Send Message
+          </Button>
+        </Grid>
+        <Grid item>
+          <TextField
+            variant="standard"
+            value={input}
+            onChange={(event) => setInput(event.target.value)}
+          />
+        </Grid>
+        <Grid item>
+          <Typography variant={"body1"}>
+            Last Message received: {lastMessage}
+          </Typography>
+        </Grid>
+      </Grid>
+    </>
+  );
+}
+
 export function Showcase(props) {
   return (
     <Accordion

example/src/index.css

@@ -14,7 +14,7 @@ code {
 }
 
 .enable-checkbox {
-  position: absolute;
+  position: fixed;
   bottom: 0;
   right: 0;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-stomp-hooks",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-alpha.5",
   "publishConfig": {
     "tag": "next"
   },

src/interfaces/StompSessionProviderProps.ts

@@ -2,8 +2,21 @@ import { StompConfig } from "@stomp/stompjs";
 import { ReactNode } from "react";
 
 export interface StompSessionProviderProps extends StompConfig {
+  /**
+   * The URL to connect to the STOMP broker.
+   * The URL can be a SockJS URL (http(s)://) or a raw Websocket URL (ws(s)://).
+   */
   url: string;
   children: ReactNode;
+  /**
+   * If the STOMP connection should be enabled/disabled. Defaults to true.
+   */
   enabled?: boolean;
+  /**
+   * The name of the StompSessionContext.
+   * This can be used to mix multiple StompSessionProviders/Stomp Connections in the same application.
+   * The default name is "default". When using a custom name, the same name must be specified as a parameter for all hooks and hocs.
+   *
+   */
   name?: string;
 }