fix(react-context): expose clients (#241)

* fix(context): expose clients

* typo

sandpack-react/src/contexts/sandpackContext.tsx

@@ -673,6 +673,7 @@ class SandpackProvider extends React.PureComponent<
       status: sandpackStatus,
       editorState,
       initMode,
+      clients: this.clients,
       closeFile: this.closeFile,
       deleteFile: this.deleteFile,
       dispatch: this.dispatchMessage,

sandpack-react/src/presets/CustomSandpack.stories.tsx

@@ -425,3 +425,54 @@ export const ResetButton: React.FC = () => (
     </SandpackProvider>
   </>
 );
+
+const ListenerIframeMessage = () => {
+  const [message, setMessage] = useState("Hello World");
+  const { sandpack } = useSandpack();
+
+  const sender = () => {
+    Object.values(sandpack.clients).forEach((client) => {
+      client.iframe.contentWindow.postMessage(message, "*");
+    });
+  };
+
+  return (
+    <>
+      <button onClick={sender}>Send message</button>
+      <input
+        onChange={({ target }) => setMessage(target.value)}
+        value={message}
+      />
+    </>
+  );
+};
+
+export const IframeMessage: React.FC = () => (
+  <SandpackProvider
+    template="react"
+    customSetup={{
+      files: {
+        "/App.js": `import {useState, useEffect} from "react";
+
+export default function App() {
+  const [message, setMessage] = useState("")
+
+  useEffect(() => {
+    window.addEventListener("message", (event) => {
+      setMessage(event.data);
+    });
+  }, [])
+
+  return <h1>{message}</h1>
+}
+`,
+      },
+    }}
+  >
+    <ListenerIframeMessage />
+    <SandpackLayout>
+      <SandpackCodeEditor />
+      <SandpackPreview />
+    </SandpackLayout>
+  </SandpackProvider>
+);

sandpack-react/src/types.ts

@@ -3,6 +3,7 @@ import type {
   ListenerFunction,
   SandpackBundlerFiles,
   SandpackError,
+  SandpackClient,
   SandpackMessage,
   UnsubscribeFunction,
 } from "@codesandbox/sandpack-client";
@@ -34,6 +35,7 @@ export interface SandpackState {
   environment?: SandboxEnvironment;
   status: SandpackStatus;
   initMode: SandpackInitMode;
+  clients: Record<string, SandpackClient>;
 
   runSandpack: () => void;
   registerBundler: (iframe: HTMLIFrameElement, clientId: string) => void;

website/docs/docs/advanced-usage/provider.md

@@ -44,6 +44,26 @@ the scenes and the template, if omitted, is `vanilla`.
 However, you will notice that the buttons on the Preview look off. This is
 because there is no styling applied to the sandpack components. For styling and theming, you need the `SandpackThemeProvider`.
 
+### Clients
+
+Under one Sandpack provider, you can have multiple `sandpack-clients`. For example, the most common case for multiple clients is when more than one SandpackPreview has been rendered.
+
+To access all the clients or to pass messages to the iframes under the same provider, use the [`useSandpack`](/api/react/#usesandpack) hook, which gives a way to interact with these clients:
+
+```js
+const ListenerIframeMessage = () => {
+  const { sandpack } = useSandpack();
+
+  const sender = () => {
+    Object.values(sandpack.clients).forEach((client) => {
+      client.iframe.contentWindow.postMessage("Hello World", "*");
+    });
+  };
+
+  return <button onClick={sender}>Send message</button>;
+};
+```
+
 ## Theme Provider
 
 The `SandpackThemeProvider` is also exported from the main package. It needs to render inside the `SandpackProvider` and it needs to surround any component that requires styling from sandpack.