Show HN: React Source Lens – Jump from UI components to source code in one click(npmjs.com)

2 pointsby ombedzi8 miesięcy temu0 comments

Show HN: React Source Lens – Jump from UI components to source code in one click

https://www.npmjs.com/package/react-source-lens

React Source Lens is a development tool that lets you inspect React component source code directly in the browser.

How it works:

Add useReactSourceLens() to your React app Hover over any component in your app Press Cmd+Shift+O (Mac) or Ctrl+Shift+O (Windows/Linux) A modal appears with the file path and line number Click "Open in VS Code" to jump directly to the source code Key features:

Visual overlay shows which component you're hovering over Works with React's debug information (development mode) Optional Babel plugin for enhanced source detection VS Code integration with vscode:// protocol Toggle overlay with Cmd+Shift+L Installation:

npm install react-source-lens Usage:

javascript import { useReactSourceLens } from 'react-source-lens';

// Basic usage useReactSourceLens();

// With VS Code integration useReactSourceLens({ projectRoot: '/path/to/your/project' }); Why it matters: When working on large or unfamiliar React codebases, finding component definitions can be time-consuming. This tool eliminates that friction by providing instant source code navigation.

Built with modern React and works with Vite, Create React App

0 comments

—