• Inspect - Hold Cmd (Mac) / Ctrl (Windows/Linux) and hover over any element to see the React component name and source file location
• Open Mac - Cmd+Click to open the active file path and line number to your code editor(vscode)
• Open Windows/Linux - Ctrl+Click to open the active file path and line number to your code editor(vscode)

Works with Vite + React & React Native For Web app in development mode.

Install

# npm
npm install react-component-grep --save-dev

Usage

Vite+React app

-----------------
# vite.config.js
-----------------
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

import reactComponentGrep from "react-component-grep/vite";  // <--- Add this line

export default defineConfig({
  plugins: [ 
    reactComponentGrep(),  // <--- Add this line
    react()
  ]
});


-----------
# main.jsx
-----------
import "react-component-grep";  // <--- Add this line

React Native Setup

---------
#App.js
--------
import { ReactComponentGrepOverlay } from 'react-component-grep/native' // <--- Add this line

return (
  <>
    {__DEV__ && <ReactComponentGrepOverlay metroPort={8081} />} // <--- Add this line
  </>
)


-----------------
#babel.config.js 
-----------------
module.exports = function (api) {                  // <--- Replace with this
  const isDev = api.env("development");
  return {
    presets: [
      'module:@react-native/babel-preset'
    ],
    plugins: [
      isDev && 'react-component-grep/babel',
      isDev && '@babel/plugin-transform-react-jsx-source'
    ].filter(Boolean),
  };
};

-----------------
#metro.config.js
----------------
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { execSync } = require("child_process") // <--- Add this line

// Replace with below config
/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('@react-native/metro-config').MetroConfig}
 */
const config = {
    server: {
        enhanceMiddleware: (middleware) => {
            return (req, res, next) => {
                if (req.url.startsWith('/open-in-vscode')) {
                    const params = new URL(req.url, 'http://localhost').searchParams;
                    const file = params.get('file');
                    const line = params.get('line') || '1';
                    if (file) {
                        try {
                            execSync(`code -g "${file}:${line}"`);
                        } catch (e) {
                            try {
                                execSync(`open "vscode://file/${file}:${line}:1"`)
                            } catch { }
                        }
                    }
                    res.writeHead(200, {
                        'Content-Type': 'text/plain',
                        'Access-Control-Allow-Origin': '*'
                    })
                    res.end('ok');
                    return;
                }
                return middleware(req, res, next);
            }
        }
    }
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);


-------------------
#webpack.config.js
-------------------

const babelLoaderConfiguration = {
  ...
    exclude: /node_modules[\/\\]react-component-grep[\/\\]dist[\/\\]native/,  <--- Add this line
  ...
}

React Native For Web Setup

----------------------
#babel.config.web.js
---------------------
plugins: ["react-component-grep/babel", "@babel/plugin-transform-react-jsx-source"]  // <--- Add this line

//or

const isDev = process.env.NODE_ENV === 'development' || process.argv.includes('serve'); <--- Add this line
module.exports = {
    presets: ['module:@react-native/babel-preset'],
    plugins: [
        ...(isDev ? ["react-component-grep/babel"] : []), <--- Add this line
        'react-native-web',
        [
            'module-resolver',
            {
                alias: {
                    '^react-native$': 'react-native-web',
                },
            },
        ],
        ...(isDev ? ["@babel/plugin-transform-react-jsx-source"] : []) <--- Add this line
    ],
}

------------
#App.web.js
------------
import "react-component-grep"; <--- Add this line

//or

if (__DEV__) {
    require("react-component-grep") <--- Add this line
}

-------------------
#webpack.config.js
-------------------
const compileNodeModules = [

    // Add every react-native package that needs compiling
    
    'react-component-grep',  <--- Add this line

].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));

const babelLoaderConfiguration = {
  ...
  
  exclude: /node_modules[\/\\]react-component-grep/,  <--- Add this line
  
  ...
}

// Add below object
const reactComponentGrepRuntimeConfiguration = {
  test: /react-component-grep[\/\\/]dist[\/\\]runtime[\/\\].*\.js$/,
  type: 'javascript/auto',
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['module:@react-native/babel-preset'],
      plugins: ['react-native-web'],
    },
  },
};

// add reactComponentGrepRuntimeConfiguration in rules array
module.exports = (env) => ({
  ...

  module: {
    rules: [
      reactComponentGrepRuntimeConfiguration,
    ]
  }

  ....
})

How it works

When the modifier key is held:

1. The hovered DOM element is highlighted with a blue overlay
2. A tooltip shows the component name, file path, and line number (if available)
3. Cmd+Click or Ctrl+Clickt opens the active file:line to code editor

License

MIT