From 7c8609dbc4cbf64496c1e22640f08b9fbc9afed4 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 8 Sep 2021 17:44:20 -0400 Subject: [PATCH] Added instructions to react-devtools-inline README for new import() factory function --- packages/react-devtools-inline/README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md index 88b2c93b7cb05..35b0127f41d54 100644 --- a/packages/react-devtools-inline/README.md +++ b/packages/react-devtools-inline/README.md @@ -64,6 +64,23 @@ const DevTools = initialize(contentWindow); ## Examples +### Supporting named hooks + +DevTools can display hook "names" for an inspected component, although determining the "names" requires loading the source (and source-maps), parsing the code, and infering the names based on which variables hook values get assigned to. Because the code for this is non-trivial, it's lazy-loaded only if the feature is enabled. + +To configure this package to support this functionality, you'll need to provide a prop that dynamically imports the extra functionality: +```js +// Follow code examples above to configure the backend and frontend. +// When rendering DevTools, the important part is to pass a 'hookNamesModuleLoaderFunction' prop. +const hookNamesModuleLoaderFunction = () => import('react-devtools-inline/hookNames'); + +// Render: +; +``` + ### Configuring a same-origin `iframe` The simplest way to use this package is to install the hook from the parent `window`. This is possible if the `iframe` is not sandboxed and there are no cross-origin restrictions.