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
Comments URL: https://news.ycombinator.com/item?id=45866064
Points: 1
# Comments: 0
Source: www.npmjs.com
