Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ericclemmons/click-to-component

Option+Click React components in your browser to instantly open the source in VS Code
https://github.com/ericclemmons/click-to-component

Last synced: about 23 hours ago
JSON representation

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

Host: GitHub
URL: https://github.com/ericclemmons/click-to-component
Owner: ericclemmons
License: mit
Created: 2022-03-13T23:58:01.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2024-11-03T23:06:00.000Z (2 months ago)
Last Synced: 2025-01-08T18:16:07.523Z (6 days ago)
Language: TypeScript
Homepage:
Size: 13.4 MB
Stars: 2,050
Watchers: 9
Forks: 82
Open Issues: 35
Metadata Files:
- Readme: .github/README.md
- License: LICENSE

Awesome Lists containing this project

awesome-web-cn - click-to-component - 可以让你使用 Alt+左键点击浏览器上的 React 组件即可自动打开 VSCode ，跳转到对应组件的代码 (Uncategorized / Uncategorized)
awesome-github-star - click-to-component

README

        # 

[![npm](https://img.shields.io/npm/v/click-to-react-component)](https://www.npmjs.com/package/click-to-react-component)

[![Release](https://github.com/ericclemmons/click-to-component/actions/workflows/release.yml/badge.svg)](https://github.com/ericclemmons/click-to-component/actions/workflows/release.yml)

Option+Click a Component in the browser to **instantly** goto the source in your editor.

![Next.js Demo](next.gif)

## 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](props.png)

- Works with frameworks like [Next.js](https://nextjs.org/),

  [Create React App](https://create-react-app.dev/),

  & [Vite](https://github.com/vitejs/vite/tree/main/packages/plugin-react)

  that use [@babel/plugin-transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source)

- Supports `vscode` & `vscode-insiders` & `cursor` [URL handling](https://code.visualstudio.com/docs/editor/command-line#_opening-vs-code-with-urls)

- Automatically **tree-shaken** from `production` builds

- Keyboard navigation in context menu (e.g. ←, →, ⏎)

- More context & faster than using React DevTools:

  > ![React DevTools](devtools.png)

## Installation

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](https://esbuild.github.io/api/#tree-shaking) will remove `click-to-react-component` from `production` builds.

## Usage

Create React App

[/src/index.js](https://github.com/ericclemmons/click-to-component/blob/main/apps/cra/src/index.js#L11)

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

   

+    

     

   

 );

```

> ![Create React App Demo](cra.gif)

Next.js

[pages/\_app.tsx](https://github.com/ericclemmons/click-to-component/blob/main/apps/next/pages/_app.tsx#L8)

```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](next.gif)

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](vite.gif)

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}

    >

  );

}

```

If [developing in container](https://github.com/ericclemmons/click-to-component/issues/58)?

### `editor`

By default, clicking will default `editor` to [`vscode`](https://code.visualstudio.com/).

If, like me, you use [`vscode-insiders`](https://code.visualstudio.com/insiders/), you can set `editor` explicitly:

```diff

-

+

```

## Run Locally

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

```