luckylin87 / react-dev-inspector

React Dev Inspector

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

Preview

Online demo: https://react-dev-inspector.zthxxx.me

Screen record (gif 8M):

Install

npm i -D react-dev-inspector

Usage & Config

Use in React

import React from 'react'
import { Inspector } from 'react-dev-inspector'

const InspectorWrapper = process.env.NODE_ENV === 'development'
  ? Inspector
  : React.Fragment

export const Layout = () => { 
  // ...
  
  return (
    <InspectorWrapper
      keys={['control', 'shift', 'command', 'c']} // default keys
      ...  // Props see below
    >
     <XXXContent>
     </XXXContent>
    </InspectorWrapper>
  )
}

after <Inspector> component was mounted，you can use window.__REACT_DEV_INSPECTOR_TOGGLE__() to toggle inspector.

<Inspector> Component Props

typescript define you can see in react-dev-inspector/es/Inspector.d.ts

Property	Description	Type	Default
keys	inspector toggle hotkeys supported keys see: https://github.com/jaywcjlove/hotkeys#supported-keys	string[]	['control', 'shift', 'command', 'c']
disableLaunchEditor	whether disable click react component to open IDE for view component code (launchEditor by default only support be used with react-dev-inpector plugins in dev)	boolean	false
onHoverElement	trigged while inpector start and mouse hover in a HTMLElement	type ElementHandler	-
onClickElement	trigged while inpector start and mouse click on a HTMLElement	type ElementHandler	-

Plugin for umi3

// .umirc.dev.ts

// https://umijs.org/config/
import { defineConfig } from 'umi'

export default defineConfig({
  plugins: [
    'react-dev-inspector/plugins/umi/react-inspector',
  ],
  inspectorConfig: {
    exclude: [
      'xxx-file-will-be-exclude',
    ], 
  },
})

Plugin for manual used in webpack

import { inspectorChainWebpack } from 'react-dev-inspector/plugins/webpack/config-inspector'


inspectorChainWebpack(webpackConfigChain, { exclude: ['xxx-file'] })

Example Project Code

code see: https://github.com/zthxxx/react-dev-inspector/tree/master/site

project preview: https://react-dev-inspector.zthxxx.me

License

MIT LICENSE