# click-to-react-component
> Option+Click your React components in your browser to open the source file in VS Code
Latest version **1.1.3** (published 2025-09-23) · ISC license · 0 weekly downloads
## Install
```sh
npm install click-to-react-component
pnpm add click-to-react-component
yarn add click-to-react-component
bun add click-to-react-component
```
## Health
**Score 60/100 (C)** — status: stable.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 1.1.3 |
| Published | 2025-09-23 |
| First published | 2022-04-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 31.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2350 |
| Author | Eric Clemmons |
| Maintainers | ericclemmons |
| Keywords | react, vue, dx, vscode, devtools |
## Links
- npm: https://www.npmjs.com/package/click-to-react-component
- Repository: https://github.com/ericclemmons/click-to-component
- Homepage: https://github.com/ericclemmons/click-to-component#readme
- Issues: https://github.com/ericclemmons/click-to-component/issues
- npm.io page: https://npm.io/package/click-to-react-component
## Dependencies (3)
- [htm](https://npm.io/package/htm.md) ^3.1.0
- [react-merge-refs](https://npm.io/package/react-merge-refs.md) ^1.1.0
- [@floating-ui/react-dom-interactions](https://npm.io/package/@floating-ui/react-dom-interactions.md) ^0.3.1
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.1.3 (latest) — 2025-09-23
- 1.1.2 — 2024-11-03
- 1.1.0 — 2023-11-25
- 1.0.8 — 2022-04-29
- 1.0.7 — 2022-04-27
- 1.0.6 — 2022-04-26
- 1.0.5 — 2022-04-26
- 1.0.4 — 2022-04-26
- 1.0.3 — 2022-04-26
- 1.0.2 — 2022-04-26
- 1.0.1 — 2022-04-26
## README
#
[](https://www.npmjs.com/package/click-to-react-component)
[](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.
## 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`
> 
- 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:
> 
## 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(
+
);
```
> 
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 (
<>
+
)
```
> 
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(
+
);
```
> 
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
```
---
_Source: https://npm.io/package/click-to-react-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._