Skip to content

Commit a7ed4d7

Browse files
author
Brian Vaughn
committed
Added instructions to react-devtools-inline README for new import() factory function
1 parent 56e2ef1 commit a7ed4d7

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

packages/react-devtools-inline/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,23 @@ const DevTools = initialize(contentWindow);
6464

6565
## Examples
6666

67+
### Supporting named hooks
68+
69+
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.
70+
71+
To configure this package to support this functionality, you'll need to provide a prop that dynamically imports the extra functionality:
72+
```js
73+
// Follow code examples above to configure the backend and frontend.
74+
// When rendering DevTools, the important part is to pass a 'hookNamesModuleLoaderFunction' prop.
75+
const hookNamesModuleLoaderFunction = () => import('react-devtools-inline/hookNames');
76+
77+
// Render:
78+
<DevTools
79+
hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
80+
{...otherProps}
81+
/>;
82+
```
83+
6784
### Configuring a same-origin `iframe`
6885

6986
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.

0 commit comments

Comments
 (0)