https://github.com/eddyerburgh/react-dev-tools-iframe-webpack-plugin
Inject code to set up React dev tools for code running in an iframe
https://github.com/eddyerburgh/react-dev-tools-iframe-webpack-plugin
Last synced: about 1 year ago
JSON representation
Inject code to set up React dev tools for code running in an iframe
- Host: GitHub
- URL: https://github.com/eddyerburgh/react-dev-tools-iframe-webpack-plugin
- Owner: eddyerburgh
- License: mit
- Created: 2018-05-25T17:17:37.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T19:29:14.000Z (over 3 years ago)
- Last Synced: 2025-03-27T15:47:41.076Z (over 1 year ago)
- Language: JavaScript
- Size: 1.15 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-dev-tools-iframe-webpack-plugin
By default, React apps running in iframes are not picked up by the React dev tools extension.
For dev tools to pick up React apps in iframes, you need to add code that sets the dev tools hook to the parent window, but the code must run before the React code runs. The must be added outside your bundle if you use ES imports (which are hoisted).
This plugin adds the code to set the dev tools hook before the React code runs.
## Usage
Install:
```
yarn add --dev react-dev-tools-iframe-webpack-plugin
```
or with npm:
```
npm install --save-dev react-dev-tools-iframe-webpack-plugin
```
And add it to your plugins array in the webpack config:
```js
const ReactDevToolsIFramePlugin = require('react-dev-tools-iframe-webpack-plugin');
module.exports = {
// ..
plugins: [new ReactDevToolsIFramePlugin()]
};
```