Enhance Development Experience with click-to-component

Posted on Edited on Word count in article: 1.9k Reading time ≈ 3 mins.

In actual development, finding code often involves copying styles or text from the browser and searching in the IDE. Can I directly click any element on the page and jump to open the corresponding code file in the IDE? click-to-component is such a tool.

Effect

https://github.com/ericclemmons/click-to-component/blob/main/.github/next.gif?raw=true

Installation

1
npm install click-to-component

Usage

Add the following code to your render function. Using environment variables to control the IDE is recommended so individual developers can control which IDE to open. If everyone uses the same IDE, you can hardcode it, like vscode.

1
<ClickToComponent editor={process.env.REACT_APP_CTC_EDITOR} />

ClickToComponent can be placed in any render position; it doesn’t have to be in the root component.

Dependencies

click-to-component only requires you to install and configure the component in your project and have the corresponding editor adequately installed, with no other installations needed.

Bonus: If you have react devtools installed, it will be even better as it will improve the tool’s speed in finding components.

Production Build

ClickToComponent already includes environment variable checks, so for production builds, just ensure NODE_ENV=production, and ClickToComponent won’t be included in the build.

JetBrains IDE Support?

The official repo currently only supports vscode/vscode-insiders/cursor. Regarding JB IDE support, I’ve submitted a PR that is waiting to be merged. If you’re eager to use it, you can directly reference the commit as a version.

1
2
3
4
5
{
 dependencies: {
   "click-to-component": "https://github.com/alanhg/click-to-component.git#abc56dfb574efcc49cb31e14743e769c5429c85f"
 }
}

Using JB is slightly more complicated than vscode.

  1. You need to install JB’s plugin IDE Remote Control.
  2. The IDE needs to have the project open.

At the end

  1. click-to-component’s initial purpose was to enhance the development experience by reducing time spent finding code during development and improving development efficiency. I’ve been using it for a while now and like it. I recommend that everyone try it.
  2. If you’re curious about how this tool is implemented, check out its source code.

Docs