Option+Click your React components in your browser to open the source file in intellij
npm install click-to-react-component-intellijOption+Click a Component in the browser to instantly goto the source in your editor.
- Option+Click opens a context menu with the parent Components' props, fileName, columnNumber, and lineNumber
- 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' 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-intellij
pnpm
`shell`
pnpm add click-to-react-component-intellij
yarn
`shell`
yarn add click-to-react-component-intellij
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
`diff`
-
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