Click on Component to open source code in React

How often do you find yourself in a difficult situation for parsing the entire code base to find the component that you see in the browser? I guess most of you have been there. Today we are going to get a peak into an npm package that solves this problem. Basically, it helps to open the source code in VSCode on the selection of UI elements in the browser.

Create a React app using Vite

I am using Vite to demonstrate this example, you can also use create-react-app. Both of these serve the same purpose.

npm create vite@latest

Install click-to-react-component package

npm install click-to-react-component

Code Setup

import ClickToComponent in your root jsx or tsx file as below

import React from "react";
import ReactDOM from "react-dom/client";
import { ClickToComponent } from "click-to-react-component";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
    <ClickToComponent />
  </React.StrictMode>
);

That’s it! you are all done, Option+Click or Alt+Click will open the component's source code.

I hope this was helpful to you. For, further reading visit the below GitHub repo

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