Skip to content

Option+Click React components in your browser to instantly open the source in VS Code

License

Notifications You must be signed in to change notification settings

ericclemmons/click-to-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

3c8aa90 · Apr 29, 2022

History

75 Commits
Apr 29, 2022
Apr 27, 2022
Apr 21, 2022
Apr 26, 2022
Apr 29, 2022
Mar 17, 2022
Mar 17, 2022
Mar 13, 2022
Apr 26, 2022
Apr 26, 2022
Mar 17, 2022
Mar 17, 2022

Repository files navigation

npm Release

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

    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:

    React DevTools

Installation

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.

Usage

Create React App

/src/index.js

+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>
 );

Create React App Demo

Next.js

pages/_app.tsx

+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} />
     </>
   )

Next.js Demo

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>
);

Vite Demo

editor

By default, clicking will deafult 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
cd apps/cra
pnpm start
Next.js
cd apps/next
pnpm dev