<ClickToComponent />

<kbd>Option+Click</kbd> a Component in the browser to instantly goto the source in your editor.

Next.js Demo

Features

<kbd>Option+Click</kbd> opens the immediate Component's source
<kbd>Option+Right-click</kbd> 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 & cursor URL handling
Automatically tree-shaken from production builds
Keyboard navigation in context menu (e.g. <kbd>←</kbd>, <kbd>→</kbd>, <kbd>⏎</kbd>)
More context & faster than using React DevTools:

Installation

shell
npm install click-to-react-component

shell
pnpm add click-to-react-component

shell
yarn add click-to-react-component

Even though click-to-react-component is added to dependencies, tree-shaking will remove click-to-react-component from production builds.

Usage

<summary>Create React App</summary> /src/index.js

diff
+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>
 );

<summary>Next.js</summary> pages/_app.tsx

diff
+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} />
     </>
   )

diff
+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>
);

<summary>Docusaurus</summary> npm install @babel/plugin-transform-react-jsx-source babel.config.js:

js
module.exports = {
  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
  plugins: [
    ...(process.env.BABEL_ENV === 'development'
      ? ['@babel/plugin-transform-react-jsx-source']
      : []),
  ],
};

src/theme/Root.js:

js
import { ClickToComponent } from 'click-to-react-component';
import React from 'react';

// Default implementation, that you can customize
export default function Root({ children }) {
  return (
    <>
      <ClickToComponent />
      {children}
    </>
  );
}

If developing in container?

`editor`

By default, clicking will default editor to vscode.

If, like me, you use vscode-insiders, you can set editor explicitly:

-<ClickToComponent />
+<ClickToComponent editor="vscode-insiders" />

Run Locally

Clone the project

gh repo clone ericclemmons/click-to-component

Go to the project directory

cd click-to-component

Install dependencies

pnpm install

Run one of the examples:

<summary>Create React App</summary>

shell
cd apps/cra
pnpm start

shell
cd apps/next
pnpm dev

Detalhes do pacote

click-to-react-component

readme (leia-me)