click-to-react-component

ClickToComponent allows you to navigate from the browser directly to your source code:

• Option+Click: Instantly opens the immediate Component's source in your editor.
• Option+Right-click: Opens a context menu containing the parent Component's props, fileName, columnNumber, and lineNumber.

It relies on @babel/plugin-transform-react-jsx-source to function and supports vscode, vscode-insiders, and cursor via URL handling. It is designed to be faster and provide more context than React DevTools.

Install the package using your preferred package manager. Although it is added to dependencies, it is automatically tree-shaken out of production builds.

npm install click-to-react-component

# or

pnpm add click-to-react-component

# or

yarn add click-to-react-component

To use with Docusaurus, you must first install @babel/plugin-transform-react-jsx-source.

1. Configure babel.config.js to include the plugin only in development environments.
2. Import and add <ClickToComponent /> to your src/theme/Root.js component.

// babel.config.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
import { ClickToComponent } from 'click-to-react-component';
import React from 'react';

export default function Root({ children }) {
  return (
    <>
      <ClickToComponent />
      {children}
    </>
  );
}

To start the development server for this Next.js application, use the dev script via npm or yarn. Once running, the application is typically accessible at http://localhost:3000.

npm run dev
# or
yarn dev

This project uses Create React App. You can manage the development lifecycle using the following npm commands in the project directory:

• npm start: Runs the application in development mode at http://localhost:3000. The page reloads on changes.
• npm test: Launches the test runner in interactive watch mode.
• npm run build: Creates a production-optimized, minified build in the build folder, ready for deployment.
• npm run eject: A one-way operation that removes the single build dependency and copies all configuration files (webpack, Babel, ESLint, etc.) directly into your project for full customization.

Import ClickToComponent and add it to your ReactDOM.createRoot(...).render(...) call in your entry point file.

+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(
  <React.StrictMode>
    <App />
+   <ClickToComponent />
  </React.StrictMode>
);

Import ClickToComponent and place it inside your root.render call, typically within React.StrictMode in src/index.js.

+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 'react-dom/client';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+    <ClickToComponent />
     <App />
   </React.StrictMode>
 );

Import ClickToComponent and add it to your pages/_app.tsx file. Wrap it alongside your <Component /> within a fragment.

+import { ClickToComponent } from 'click-to-react-component'
 import type { AppProps } from 'next/app'
 import '../styles/globals.css'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
+      <ClickToComponent />
       <Component {...pageProps} />
     </>
   )
 }

By default, ClickToComponent uses vscode. If you use a different editor like vscode-insiders or cursor, you can specify it using the editor prop.

-<ClickToComponent />
+<ClickToComponent editor="vscode-insiders" />

The <ClickToComponent /> component accepts an optional props object to customize its behavior. You can specify which code editor to open and how to transform the file path before opening it.

• editor: Specifies the target editor. Supported values include 'vscode', 'vscode-insiders', and 'cursor'. You can also provide a custom string for other editors.
• pathModifier: A function that receives the file path as a string and returns a modified string. This is useful for adjusting paths to match your local environment or workspace structure.

The ClickToComponent component enables click-to-source functionality in your React application. When active, it allows you to hover over elements (using the Alt key) and click them to open the corresponding source code in your configured editor.

Interaction Model

• Hover: Hold the Alt key while moving the mouse to highlight elements that can be linked to source code.
• Click: While holding Alt, click an element to immediately open its source file in the editor.
• Context Menu: While holding Alt, right-click an element to open a context menu for more options.

Props

• editor (string): The name of the editor to use (e.g., 'vscode'). Defaults to 'vscode'.
• pathModifier (function/string): A modifier used to transform the path to the source file before opening it in the editor.

The ClickToComponent component is the primary entrypoint for the package. It is designed to be used during development to enable 'click-to-component' functionality.

Important Behavior: To prevent accidental inclusion in production builds, the component automatically detects your environment. If process.env.NODE_ENV is not set to 'development', the component renders as null and has no effect on your application.