ericclemmons/click-to-component

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

Next.js Demo

Features

Option+Click opens the immediate Component's source
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

```shell npm install click-to-react-component ```

pnpm

```shell pnpm add click-to-react-component ```

yarn

```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

Create React App

[/src/index.js](https://github.com/ericclemmons/click-to-component/blob/main/apps/cra/src/index.js#L11) ```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( + ); ``` > ![Create React App Demo](cra.gif)

Next.js

[pages/\_app.tsx](https://github.com/ericclemmons/click-to-component/blob/main/apps/next/pages/_app.tsx#L8) ```diff +import { ClickToComponent } from 'click-to-react-component' import type { AppProps } from 'next/app' import '../styles/globals.css' function MyApp({ Component, pageProps }: AppProps) { return ( <> + ) ``` > ![Next.js Demo](next.gif)

Vite

```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( + ); ``` > ![Vite Demo](vite.gif)

Docusaurus

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 ( <> {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:

Create React App

```shell cd apps/cra pnpm start ```

Next.js

```shell cd apps/next pnpm dev ```