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