Option+Click a Component in the browser to instantly goto the source in your editor.

Features
-
Option+Click opens a context menu with the parent Components' props
, fileName
, columnNumber
, and lineNumber
-
Option+Right-click opens a context menu with the parent Components' props
, fileName
, columnNumber
, and lineNumber

-
Works with frameworks like Next.js,
Create React App,
& Vite
that use @babel/plugin-transform-react-jsx-source
-
Supports vscode
& vscode-insiders
' URL handling
-
Automatically tree-shaken from production
builds
-
Keyboard navigation in context menu (e.g. ←, →, ⏎)
-
More context & faster than using React DevTools:

Installation
npm
npm install click-to-react-component-intellij
pnpm
pnpm add click-to-react-component-intellij
yarn
yarn add click-to-react-component-intellij
Even though click-to-react-component
is added to dependencies
, tree-shaking will remove click-to-react-component
from production
builds.
Usage
Create React App
+import { ClickToComponent } from 'click-to-react-component';
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
@@ -8,7 +7,6 @@ import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
+ <ClickToComponent />
<App />
</React.StrictMode>
);

Next.js
+import { ClickToComponent } from 'click-to-react-component'
import type { AppProps } from 'next/app'
import '../styles/globals.css'
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
+ <ClickToComponent />
<Component {...pageProps} />
</>
)

Vite
+import { ClickToComponent } from "click-to-react-component";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
+ <ClickToComponent />
</React.StrictMode>
);

editor
-<ClickToComponent />
Run Locally
Go to the project directory
cd click-to-component
Install dependencies
pnpm install
Run one of the examples:
Create React App
cd apps/cra
pnpm start
Next.js
cd apps/next
pnpm dev