# react-dev-inspector-enhanced

> dev-tool for inspect react components and jump to local IDE for component code.

Latest version **1.0.4** (published 2022-10-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dev-inspector-enhanced
pnpm add react-dev-inspector-enhanced
yarn add react-dev-inspector-enhanced
bun add react-dev-inspector-enhanced
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-10-08 |
| First published | 2022-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12.0.0 |
| Dependencies | 10 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | hjiog |
| Maintainers | hjiog |
| Keywords | react, component, inspector |

## Links

- npm: https://www.npmjs.com/package/react-dev-inspector-enhanced
- Repository: https://github.com/hjiog/react-dev-inspector-enhanced
- Homepage: https://github.com/hjiog/react-dev-inspector-enhanced#readme
- Issues: https://github.com/hjiog/react-dev-inspector-enhanced/issues
- npm.io page: https://npm.io/package/react-dev-inspector-enhanced

## Dependencies (10)

- [hotkeys-js](https://npm.io/package/hotkeys-js.md) ^3.8.1
- [picocolors](https://npm.io/package/picocolors.md) ^1.0.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.11.6
- [querystring](https://npm.io/package/querystring.md) ^0.2.1
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.17.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.11.5
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.11.5
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^12.0.1
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.11.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2022-10-08
- 1.0.2 — 2022-08-21

## README

# react-dev-inspector-enhanced

魔改 [react-dev-inspector](https://github.com/zthxxx/react-dev-inspector) 项目，支持通过点击页面添加高阶组件


## 使用

> 目前仅支持 webpack 插件

1. 配置 babel 插件
```js
const {
  override,
  addBabelPlugin,
} = require('customize-cra');

module.exports = {
  webpack: override(
    /** react-dev-inspector - babel config */
    addBabelPlugin([
      // https://github.com/zthxxx/react-dev-inspector#inspector-babel-plugin-options
      'react-dev-inspector-enhanced/plugins/babel',
      {
        excludes: [],
      },
    ]),
  ),
};

```
2. 开发环境配置 devServer 插件
```js
const {
  launchEditorMiddleware,
  ReactInspectorPlugin,
} = require('react-dev-inspector-enhanced/plugins/webpack');
const {
  override,
  overrideDevServer,
  addWebpackPlugin,
} = require('customize-cra');

module.exports = {
  webpack: override(
    /**
     * react-dev-inspector - dev server config
     * for create-react-app@^4 + webpack-dev-server@^3
     */
    addWebpackPlugin(new ReactInspectorPlugin()),
  ),

  /**
   * react-dev-inspector - dev server config
   * for create-react-app@^5 + webpack-dev-server@^4.7
   */
  devServer: overrideDevServer(serverConfig => {
    // https://webpack.js.org/configuration/dev-server/#devserversetupmiddlewares
    serverConfig.setupMiddlewares = middlewares => {
      middlewares.unshift(launchEditorMiddleware);
      return middlewares;
    };

    return serverConfig;
  }),
};

```
3. 组件上使用

```tsx
import { Inspector } from 'react-dev-inspector-enhanced';

export const HomePage = () => {
  return (
    <Inspector
      HOC={{
        name: 'Log',
        importCode: `import { Log } from './components/Log';`,
      }}
      keys={{
        gotoEditor: ['shift', 'command', 's'],
        addHOC: ['command', 'shift', 'l'],
      }}>
      <div>
        <div>
          test
        </div>
      </div>
    </Inspector>
  );
};

export default HomePage;

```


> 具体配置参考 https://github.com/hjiog/react-dev-inspector-enhanced/blob/main/examples/cra/config-overrides.js

---
_Source: https://npm.io/package/react-dev-inspector-enhanced · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._