Option+Click a Component in the browser to instantly goto the source in your editor.
-
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
production
builds -
Keyboard navigation in context menu (e.g. ←, →, ⏎)
-
More context & faster than using React DevTools:
npm
npm install click-to-react-component
pnpm
pnpm add click-to-react-component
yarn
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.
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}
</>
);
}
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" />
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
cd apps/cra
pnpm start
Next.js
cd apps/next
pnpm dev