Using click-to-react-component to Quickly Locate React Component Source Code

Locating the exact source file for a UI element is a common pain point in large React applications, especially when class names are generated by styled‑components or when text is externalized for internationalization.

The click-to-react-component library provides a simple solution: after installing the package, you can press Option + Click on any element to open its component file directly in VSCode, or Option + Right‑Click to view and select any parent component.

To try it out, create a new Vite project, install antd, and add three demo components ( App.tsx, Aaa.tsx, Bbb.tsx) as shown below:

npx create-vite
npm install
npm install --save antd

import React from 'react';
import { ColorPicker, Space } from 'antd';
import Aaa from './Aaa';

const Demo = () => (
  <div>
    <Space direction="vertical">
      <ColorPicker defaultValue="#1677ff" size="small" />
      <ColorPicker defaultValue="#1677ff" size="large" />
    </Space>
    <Aaa />
  </div>
);
export default Demo;

import React, { useState } from 'react';
import { Slider, Switch } from 'antd';
import Bbb from './Bbb';

const Aaa: React.FC = () => {
  const [disabled, setDisabled] = useState(false);
  const onChange = (checked: boolean) => setDisabled(checked);
  return (
    <>
      <div>
        <Slider defaultValue={30} disabled={disabled} />
        <Slider range defaultValue={[20, 50]} disabled={disabled} />
        Disabled: <Switch size="small" checked={disabled} onChange={onChange} />
      </div>
      <Bbb />
    </>
  );
};
export default Aaa;

import React from 'react';
import { Card, Space } from 'antd';

const Bbb: React.FC = () => (
  <Space direction="vertical" size={16}>
    <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
    <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </Space>
);
export default Bbb;

After running npm run dev, the demo renders in the browser. Pressing Option + Click on any element opens the corresponding component file at the exact line and column, while Option + Right‑Click shows a list of ancestor components.

The magic works because every DOM node created by React carries a hidden property named __reactFiber$ that references its fiber node. From the fiber you can traverse upward via the _debugOwner field to reach parent components, and the _debugSource field (added by the Babel plugin @babel/plugin-transform-react-jsx-source) provides the absolute file path and line/column numbers.

When a user activates the shortcut, the library constructs a URL of the form

vscode://file/<absolute‑path>:<line>:<column>

and opens it, causing VSCode to jump directly to the source location.

Additional UI features include hover highlighting using data‑xxx attributes (automatically generated from dataset assignments) and a pop‑over built with @floating-ui. The component only renders in development mode; in production it is automatically omitted.

In summary, click-to-react-component offers a lightweight, developer‑friendly way to bridge the gap between the rendered UI and its source code, dramatically speeding up debugging and maintenance of large React codebases.