react-devtools-inline README updates (#22967)
Brian Vaughn committed
Dec 15, 2021 at 10:44 UTC
e59233aa854fbeabe4698b40ef95da8e4c69ed6c
1 file changed
+20
-3
packages/react-devtools-inline/README.md
+20
-3
@@ -173,7 +173,7 @@ iframe.onload = () => {
173
174
### Advanced integration with custom "wall"
175
176
-Below is an example of an advanced integration with a website like [Replay.io](https://replay.io/).
176
+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).
177
178
```js
179
import {
@@ -205,9 +205,9 @@ initializeBackend(contentWindow);
205
206
// Prepare DevTools for rendering.
207
// To use the custom Wall we've created, we need to also create our own "Bridge" and "Store" objects.
208
-const bridge = createBridge(target, wall);
208
+const bridge = createFrontendBridge(contentWindow, wall);
209
const store = createStore(bridge);
210
-const DevTools = createDevTools(target, { bridge, store });
210
+const DevTools = createDevTools(contentWindow, { bridge, store });
211
212
// You can render DevTools now:
213
const root = createRoot(container);
@@ -220,6 +220,23 @@ activateBackend(contentWindow, {
220
});
221
```
222
223
+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:
224
+```js
225
+const uid = "some-unique-string-shared-between-both-pieces";
226
+const wall = {
227
+ listen(listener) {
228
+ window.addEventListener("message", (event) => {
229
+ if (event.data.uid === uid) {
230
+ listener(event.data);
231
+ }
232
+ });
233
+ },
234
+ send(event, payload) {
235
+ window.postMessage({ event, payload, uid }, "*");
236
+ },
237
+};
238
+```
239
+
240
## Local development
241
You can also build and test this package from source.
242