From e59233aa854fbeabe4698b40ef95da8e4c69ed6c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 15 Dec 2021 10:44:14 -0500
Subject: [PATCH] react-devtools-inline README updates (#22967)

---
 packages/react-devtools-inline/README.md | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index dff2ce2a06..fe07163352 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -173,7 +173,7 @@ iframe.onload = () => {
 
 ### Advanced integration with custom "wall"
 
-Below is an example of an advanced integration with a website like [Replay.io](https://replay.io/).
+Below is an example of an advanced integration with a website like [Replay.io](https://replay.io/) or Code Sandbox's Sandpack (where more than one DevTools instance may be rendered per page).
 
 ```js
 import {
@@ -205,9 +205,9 @@ initializeBackend(contentWindow);
 
 // Prepare DevTools for rendering.
 // To use the custom Wall we've created, we need to also create our own "Bridge" and "Store" objects.
-const bridge = createBridge(target, wall);
+const bridge = createFrontendBridge(contentWindow, wall);
 const store = createStore(bridge);
-const DevTools = createDevTools(target, { bridge, store });
+const DevTools = createDevTools(contentWindow, { bridge, store });
 
 // You can render DevTools now:
 const root = createRoot(container);
@@ -220,6 +220,23 @@ activateBackend(contentWindow, {
 });
 ```
 
+Alternately, if your code can't share the same `wall` object, you can still provide a custom Wall that connects a specific DevTools frontend to a specific backend like so:
+```js
+const uid = "some-unique-string-shared-between-both-pieces";
+const wall = {
+  listen(listener) {
+    window.addEventListener("message", (event) => {
+      if (event.data.uid === uid) {
+        listener(event.data);
+      }
+    });
+  },
+  send(event, payload) {
+    window.postMessage({ event, payload, uid }, "*");
+  },
+};
+```
+
 ## Local development
 You can also build and test this package from source.