Skip to content

Commit

Permalink
Added instructions to react-devtools-inline README for new import() f…
Browse files Browse the repository at this point in the history
…actory function
  • Loading branch information
Brian Vaughn committed Sep 9, 2021
1 parent 22d2eb2 commit 7c8609d
Showing 1 changed file with 17 additions and 0 deletions.
17 changes: 17 additions & 0 deletions packages/react-devtools-inline/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
<DevTools
hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
{...otherProps}
/>;
```

### 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.
Expand Down

0 comments on commit 7c8609d

Please sign in to comment.