petite-react-grab

A single-file reference implementation of react-grab. Pink hover overlay, tiny toolbar, isolated via isolet-js, powered by react-grab/primitives for real React component detection.

~115 lines, one .tsx file, drop it in.

Usage

import { PetiteReactGrab } from "petite-react-grab";

export function App() {
  return (
    <>
      <YourApp />
      <PetiteReactGrab />
    </>
  );
}

Click Grab in the bottom toolbar, hover over anything, click to copy the element's component name + selector + stack + HTML preview to the clipboard. Esc exits.

How it works

• PetiteReactGrab mounts an isolet-js widget on document.body. The widget lives in a shadow root so its styles and DOM don't leak.
• Inside the shadow root, a small React tree renders the overlay + toolbar.
• Hover/click listeners are attached at the document capture phase. elementFromPoint finds the target; closest("[data-petite-react-grab-host]") skips the widget's own UI.
• getElementContext from react-grab/primitives resolves the React component name, source stack, CSS selector, and HTML preview for any DOM element.

Demo

npm install
cd demo
npm install
npm run dev

The demo uses a Vite alias to point petite-react-grab at ../src/index.tsx. Note the two key bits in demo/vite.config.ts:

resolve: { dedupe: ["react", "react-dom"] },
optimizeDeps: { exclude: ["isolet-js", "isolet-js/react"] },

Without these, Vite's dep optimizer will bundle a second copy of React into the isolet-js/react adapter and you'll hit "Invalid hook call."

License

MIT