Option+Click your React components in your browser to open the source file in VS Code
npm install click-to-react-component
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, and lineNumber
> !props
- 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. ←, →, ⏎)
- More context & faster than using React DevTools:
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.
Create React App
`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(
+
);
Next.js
`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
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
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}
);
}
`
By default, clicking will default editor to vscode.
If, like me, you use vscode-insiders, you can set editor explicitly:
`diff`
-
+
Clone the project
`shell`
gh repo clone ericclemmons/click-to-component
Go to the project directory
`shell`
cd click-to-component
Install dependencies
`shell`
pnpm install
Run one of the examples:
Create React App
`shell`
cd apps/cra
pnpm start
Next.js
`shell``
cd apps/next
pnpm dev