Option+Click a Component in the browser to instantly goto the source in your editor.
Features
-
Option+Click opens the immediate Component's source
-
Option+Right-click opens a context menu with the parent Components'
props,fileName,columnNumber, andlineNumber
-
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
productionbuilds -
Keyboard navigation in context menu (e.g. ←, →, ⏎)
-
More context & faster than using React DevTools:
Installation
npm
npm install click-to-react-componentpnpm
pnpm add click-to-react-componentyarn
yarn add click-to-react-componentEven 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>
);
Docusaurus
npm install @babel/plugin-transform-react-jsx-source
babel.config.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:
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}
</>
);
}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-componentGo to the project directory
cd click-to-componentInstall dependencies
pnpm installRun one of the examples:
Create React App
cd apps/cra
pnpm startNext.js
cd apps/next
pnpm dev