Option+Click a Component in the browser to instantly goto the source in your editor

Last update: May 18, 2022

npm Release

Option+Click a Component in the browser to instantly goto the source in your editor.

Next.js Demo

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

    props

  • Works with frameworks like Next.js, Create React App, & Vite that use @babel/plugin-transform-react-jsx-source

  • Supports vscode & vscode-insiders' URL handling

  • Automatically tree-shaken from production builds

  • Keyboard navigation in context menu (e.g. , , )

  • More context & faster than using React DevTools:

    React DevTools

Installation

npm
npm install click-to-react-component
pnpm
pnpm add click-to-react-component
yarn
yarn add click-to-react-component

Even though click-to-react-component is added to dependencies, tree-shaking will remove click-to-react-component from production builds.

Usage

Create React App

/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 './reportWebVitals';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   
+    
     
   
 );

Create React App Demo

Next.js

pages/_app.tsx

+import { ClickToComponent } from 'click-to-react-component'
 import type { AppProps } from 'next/app'
 import '../styles/globals.css'

 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
+      
       
     
   )

Next.js Demo

Vite
+ );">
+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(
  
    
+   
  
);

Vite Demo

editor

By default, clicking will deafult editor to vscode.

If, like me, you use vscode-insiders, you can set editor explicitly:

">
-
+

Run Locally

Clone the project

gh repo clone ericclemmons/click-to-component

Go to the project directory

cd click-to-component

Install dependencies

pnpm install

Run one of the examples:

Create React App
cd apps/cra
pnpm start
Next.js
cd apps/next
pnpm dev

GitHub

https://github.com/ericclemmons/click-to-component
Comments
  • 1. Error when runs from WSL

    Paths are not working with WSL.

    To Reproduce Steps to reproduce the behavior:

    1. Create a project with Vite inside WSL
    2. Opened it on VS Code using the Remote - WSL extension.
    3. Install click-to-component and add the configs
    4. Run de project
    5. Click on the secondary button and show the context menu with components image
    6. Click on component
    7. Show an error on VSCode image
    8. If click on [Yes] button, show this message image
    9. This is the message that shows the console in Chrome image

    Expected behavior Open in VSCode without error

    Desktop:

    • OS: Windows 10 21H2
    • Browser: Chrome
    • Version: Version 100.0.4896.127 (Official Build) (64-bit)
    • WSL: Version 2
    Reviewed by equiman at 2022-04-27 17:03
  • 2. Module not found: Can't resolve

    Module not found: Can't resolve 'click-to-react-component'

    I am trying this awesome tool, but can not use it as a package. For now, I put src files in my components folder.

    If I try import from package directly, I will meet resolve error like above.

    Don't know why, seems others do not have this problem.

    My webpack is [email protected]

    Reviewed by xxleyi at 2022-04-28 13:40
  • 3. Set `z-index` of FloatingOverlay contextmenu to maximum possible

    Cool lib, discovered it's using Floating UI 😄

    Describe the bug Right now if the webpage has positioned elements, the context menu can be obscured beneath them.

    Screen Shot 2022-04-27 at 8 58 39 am

    It may be a good idea to set the z-index of the FloatingOverlay to 2147483647 to ensure it's always above everything else. (In fact, FloatingOverlay maybe should do that by default?)

    To Reproduce Right click

    Desktop (please complete the following information):

    • OS: macOS
    • Browser Chrome
    • Version 100

    Additional context Add any other context about the problem here.

    Reviewed by atomiks at 2022-04-26 23:01
  • 4. Hijacks default right click behavior (can't view native context menu)

    Describe the bug Right now this component hijacks the right click event, making the native context menu impossible to view. From the readme, it looks like this should require a modifier key as well.

    This should require, or support the option to require, a modifier to open the context menu on right click

    To Reproduce Steps to reproduce the behavior:

    1. Right click
    2. The click to component menu opens instead of the native context menu

    Expected behavior There should be a way to view the native context menu as well (either with a modifier to show the click-to-react-component menu, or a modifier to show the native context menu.

    Desktop (please complete the following information):

    • OS: macOS 12.3.1
    • Browser Chome
    • Version 100.0.4896.127
    Reviewed by tknickman at 2022-05-02 15:46
  • 5. Give context menu highest z-index to try and float it above other elements

    Noticed the context menu getting lost below elements with z-index > 0. Giving the highest z-index value to the context menu to give it a chance of being on above other elements.

    Reviewed by neil-buckley at 2022-04-27 21:37
  • 6. Fix `data-click-to-component` attribute staying on body indefinitely

    That was causing the styles pointer-events: auto !important; to get applied to all body descendants indefinitely after ClickToComponent hover state was triggered.

    Reviewed by dcastil at 2022-05-10 16:07
  • 7. Set floating-ui to max z-index

    This seems to pass my smoke tests.

    The menu is wrapped in a div which needs to get the z-index in order for the menu to display above everything, but not interfere with existing elements with z-indexes.

    Reviewed by neil-buckley at 2022-04-28 08:05
  • 8. Add package.json#exports

    ❯ pnpm dev
    
    > [email protected] dev /private/tmp/next-app
    > next dev
    
    ready - started server on 0.0.0.0:3000, url: http://localhost:3000
    wait  - compiling...
    event - compiled client and server successfully in 976 ms (148 modules)
    wait  - compiling / (client and server)...
    wait  - compiling...
    event - compiled client and server successfully in 395 ms (166 modules)
    (node:14038) [DEP0151] DeprecationWarning: No "main" or "exports" field defined in the package.json for /private/tmp/next-app/node_modules/click-to-react-component/ resolving the main entry point "index.js", imported from /private/tmp/next-app/.next/server/pages/_app.js.
    Default "index" lookups for the main are deprecated for ES modules.
    (Use `node --trace-deprecation ...` to show where the warning was created)
    
    Reviewed by ericclemmons at 2022-04-26 17:12
  • 9. How does it work under the hood?

    1. In development, frameworks like CRA, Next.js, etc. all include file metadata (e.g. fileName, lineNumber, columNumber) when transforming JSX. (Link babel plugin here)
    2. On hover or right-click, click-to-react-component grabs the React renderer & finds the Fiber node associated with the DOM element (e.g. $0['__reactFiber$fq4qzh0im06'])
    3. This fiber node has a __debugSource value that contains the file metadata from babel.
    4. This file metadata is turned into a URL & launches your editor: https://code.visualstudio.com/docs/editor/command-line#_opening-vs-code-with-urls
    Reviewed by ericclemmons at 2022-04-25 17:00
  • 10. Version Packages

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    • 7661be0: Set floating-ui to max z-index
    Reviewed by github-actions[bot] at 2022-04-28 22:19
  • 11. Version Packages

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    • 3ae6fcf: Show menu only on Option+Right-click
    Reviewed by github-actions[bot] at 2022-04-27 21:01
  • 12. Version Packages

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    • 3c81f0b: Fixes data-click-to-component attribute staying on body indefinitely
    Reviewed by github-actions[bot] at 2022-05-15 20:17
  • 13. Option+Click doesn't work with material-ui components: "Couldn't find a React instance for the element"

    Describe the bug Option+Right-click works to open the context menu and then go to a selected component.

    However, just Option+Click doesn't do anything despite showing the green border around the hovered element. This appears to only be a problem with material UI styled elements.

    To Reproduce This is a private product, so I can't share any useful code. However, the problem might be with the fact that we use MaterialUI's ("@material-ui/core": "^4.12.2",) makeStyles() for styling our components. That might mess up the logic for how you're finding the target component.

    Screen Shot 2022-05-11 at 10 21 54 AM

    Expected behavior It should open the target component's file in VSCode as desired.

    Desktop (please complete the following information):

    • OS: MacOS
    • Browser Chrome
    • Version 101.0.4951.54 (Official Build) (x86_64)
    Reviewed by Lwdthe1 at 2022-05-11 14:26
  • 14. Cannot find module './src/ClickToComponent' or its corresponding type declarations.

    Hey everyone :) I encountered a small TypeScript problem when working with react-click-to-component:

    Describe the bug Running the typescript compiler with "skipLibCheck": false will result in the following error:

    node_modules/click-to-react-component/src/types.d.ts:1:34 - error TS2307: Cannot find module './src/ClickToComponent' or its corresponding type declarations.
    

    To Reproduce Steps to reproduce the behavior:

    1. Setup a new React project with TypeScript and use
    2. Make sure "skipLibCheck" is set to false
    3. Run the TypeScript compiler

    Expected behavior No TSC errors should occur.

    Screenshots image

    Additional context I guess this happens, because the path reference inside of types.d.ts does not exist. Since this path should be resolved relative to the current file, it looks for a src dir inside of src and will not find that.

    A possible fix would be to move types.d.ts to the root directory, or to fix the path.

    Reviewed by andrewgreenh at 2022-05-04 10:57
  • 15. Try find parent when couldn't find a React instance ( has source) for the element

    export function getSourceForElement(
      /**
       * @type {HTMLElement}
       */
      element
    ) {
      const instance = getReactInstanceForElement(element)
      const source = getSourceForInstance(instance)
    
      if (source) return source
    
      console.warn("Couldn't find a React instance for the element", element)
    }
    

    Now in getSourceForElement, when we can't find source of an element, we just return undefined.

    Can we try to find a parent React instance which has a source?

    Reviewed by xxleyi at 2022-04-28 01:50
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor

React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

May 7, 2022
An open-source UI component library for building high-quality, accessible design systems and web apps
An open-source UI component library for building high-quality, accessible design systems and web apps

An open-source UI component library for building high-quality, accessible design systems and web apps

May 16, 2022
Reusable component Reactjs for Mazer Template, Free and Open-Source
Reusable component Reactjs for Mazer Template, Free and Open-Source

React Mazer UI React Mazer UI is React Wrapper for Mazer Template, see more about Mazer Installation Using NPM $ npm install react-mazer-ui --save Usi

Apr 30, 2022
A free React landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by
A free React landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by

Free React landing page template Open is a free React landing page template designed for developers/makers who want to create a quick and professional

May 13, 2022
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

May 18, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

May 13, 2022
InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Nov 8, 2021
Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.

Juno Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps. base on MATERIAL-UI. Explore Juno with the

Mar 22, 2022
A lightweight react component to add a mouse parallax effect to your website.

React Parallax Mouse ❤️ A lightweight react component to add a mouse parallax effect to your website ?? Efficient and lag free animations optimized fo

May 17, 2022
This is a react component which made your text does not wrap and dynamically adjust the font size.
This is a react component which made your text does not wrap and dynamically adjust the font size.

react-dynamic-font This is a react component which made your text does not wrap and dynamically adjust the font size Sometimes we want some text to ha

Dec 1, 2021
React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Dec 22, 2021
⚡️ Simple, Modular & Accessible UI Components for your React Applications
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

May 9, 2022
Awesome chat widget for your React App
Awesome chat widget for your React App

Awesome chat widget for your React App

May 2, 2022
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit System.

May 13, 2022
A UI to manage your Meilisearch instances
A UI to manage your Meilisearch instances

UIRecord A UI for managing your meilisearch instances Screenshots Features ✨ Create new indexes ?? Search within your indexes ?? Add Documents to any

Apr 27, 2022
Font Awesome 5 React component

react-fontawesome Font Awesome 5 React component using SVG with JS Documentation How to Help Contributors Releasing this project (only project owners

May 9, 2022
A React Component library implementing the Base design language
A React Component library implementing the Base design language

Base Web React Components Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. Us

May 13, 2022
The Most Complete React UI Component Library
The Most Complete React UI Component Library

PrimeReact PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation. Download Prim

May 9, 2022
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

May 6, 2022