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

bigbossx/click-to-component

This branch is 3 commits ahead of, 14 commits behind ericclemmons/click-to-component:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d16df81 · Sep 13, 2024
Nov 25, 2023
Nov 25, 2023
Apr 21, 2022
Nov 25, 2023
Sep 13, 2024
Mar 17, 2022
Mar 17, 2022
Mar 13, 2022
Jun 11, 2022
Nov 25, 2023
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

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

If developing in container?

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 56.1%
  • JavaScript 36.2%
  • CSS 3.6%
  • HTML 2.1%
  • Dockerfile 1.6%
  • Shell 0.4%