[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73507":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},73507,"react-grab","aidenybai\u002Freact-grab","aidenybai","Copy any UI element for your agent","https:\u002F\u002Freact-grab.com",null,"TypeScript",7297,329,11,37,0,9,26,120,27,104.56,"MIT License",false,"main",[26,27,28,5],"ai","coding","react","2026-06-12 04:01:09","# \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002F.github\u002Fpublic\u002Flogo.png?raw=true\" width=\"60\" align=\"center\" \u002F> React Grab\n\n[![version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-grab?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Freact-grab)\n[![downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Freact-grab.svg?style=flat&colorA=000000&colorB=000000)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Freact-grab)\n\nCopy any UI element for your agent.\n\nReact Grab points agents to the actual source behind each selection, so edits are [**2× faster**](https:\u002F\u002Fbenchmarks.react-grab.com\u002F) and more accurate.\n\n### [Try out a demo! →](https:\u002F\u002Freact-grab.com)\n\n## Quick Start\n\nRun this at your project root:\n\n```bash\nnpx grab@latest init\n```\n\n## How It Works\n\nReact Grab turns a browser selection into source context your agent can use:\n\n1. Hover any UI element in your app.\n2. Press **⌘C** or **Ctrl+C**.\n3. Paste the copied context into your agent.\n\nThe copied context includes the selected element, source location, nearby code, and component stack:\n\n```txt\n\u003Ca class=\"ml-auto inline-block text-sm\" href=\"#\">\n  Forgot your password?\n\u003C\u002Fa>\n\n\u002F\u002F components\u002Flogin-form.tsx:46\n  45| \u003Cdiv className=\"flex items-center\">\n> 46|   \u003Ca className=\"ml-auto inline-block text-sm\" href=\"#\">\n  47|     Forgot your password?\n  48|   \u003C\u002Fa>\n\n  in LoginForm (at components\u002Flogin-form.tsx:46:19)\n```\n\n## Manual Installation\n\nIf you cannot use the CLI, install React Grab manually for your framework:\n\n#### Next.js (App router)\n\nAdd this inside your `app\u002Flayout.tsx`:\n\n```jsx\nimport Script from \"next\u002Fscript\";\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml>\n      \u003Chead>\n        {process.env.NODE_ENV === \"development\" && (\n          \u003CScript\n            src=\"\u002F\u002Funpkg.com\u002Freact-grab\u002Fdist\u002Findex.global.js\"\n            crossOrigin=\"anonymous\"\n            strategy=\"beforeInteractive\"\n          \u002F>\n        )}\n      \u003C\u002Fhead>\n      \u003Cbody>{children}\u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n```\n\n#### Next.js (Pages router)\n\nAdd this into your `pages\u002F_document.tsx`:\n\n```jsx\nimport { Html, Head, Main, NextScript } from \"next\u002Fdocument\";\n\nexport default function Document() {\n  return (\n    \u003CHtml lang=\"en\">\n      \u003CHead>\n        {process.env.NODE_ENV === \"development\" && (\n          \u003CScript\n            src=\"\u002F\u002Funpkg.com\u002Freact-grab\u002Fdist\u002Findex.global.js\"\n            crossOrigin=\"anonymous\"\n            strategy=\"beforeInteractive\"\n          \u002F>\n        )}\n      \u003C\u002FHead>\n      \u003Cbody>\n        \u003CMain \u002F>\n        \u003CNextScript \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002FHtml>\n  );\n}\n```\n\n#### Vite\n\nAdd this at the top of your main entry file (e.g., `src\u002Fmain.tsx`):\n\n```tsx\nif (import.meta.env.DEV) {\n  import(\"react-grab\");\n}\n```\n\n#### Webpack\n\nFirst, install React Grab:\n\n```bash\nnpm install react-grab\n```\n\nThen add this at the top of your main entry file (e.g., `src\u002Findex.tsx` or `src\u002Fmain.tsx`):\n\n```tsx\nif (process.env.NODE_ENV === \"development\") {\n  import(\"react-grab\");\n}\n```\n\n## Plugins\n\nUse plugins to extend React Grab's built-in UI with context menu actions, toolbar menu items, lifecycle hooks, and theme overrides. Plugins run within React Grab.\n\nRegister a plugin using the `registerPlugin` and `unregisterPlugin` exports:\n\n```js\nimport { registerPlugin } from \"react-grab\";\n\nregisterPlugin({\n  name: \"my-plugin\",\n  hooks: {\n    onElementSelect: (element) => {\n      console.log(\"Selected:\", element.tagName);\n    },\n  },\n});\n```\n\nIn React, register inside a `useEffect`:\n\n```jsx\nimport { registerPlugin, unregisterPlugin } from \"react-grab\";\n\nuseEffect(() => {\n  registerPlugin({\n    name: \"my-plugin\",\n    actions: [\n      {\n        id: \"my-action\",\n        label: \"My Action\",\n        shortcut: \"M\",\n        onAction: (context) => {\n          console.log(\"Action on:\", context.element);\n          context.hideContextMenu();\n        },\n      },\n    ],\n  });\n\n  return () => unregisterPlugin(\"my-plugin\");\n}, []);\n```\n\nActions use a `target` field to control where they appear. Omit `target` (or set `\"context-menu\"`) for the right-click menu, or set `\"toolbar\"` for the toolbar dropdown:\n\n```js\nactions: [\n  {\n    id: \"inspect\",\n    label: \"Inspect\",\n    shortcut: \"I\",\n    onAction: (ctx) => console.dir(ctx.element),\n  },\n  {\n    id: \"toggle-freeze\",\n    label: \"Freeze\",\n    target: \"toolbar\",\n    isActive: () => isFrozen,\n    onAction: () => toggleFreeze(),\n  },\n];\n```\n\nSee [`packages\u002Freact-grab\u002Fsrc\u002Ftypes.ts`](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002Fpackages\u002Freact-grab\u002Fsrc\u002Ftypes.ts) for the full `Plugin`, `PluginHooks`, and `PluginConfig` interfaces.\n\n## Resources & Contributing Back\n\nWant to try it out? Check out [our demo](https:\u002F\u002Freact-grab.com).\n\nLooking to contribute back? Check out the [Contributing Guide](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002FCONTRIBUTING.md).\n\nWant to talk to the community? Hop in our [Discord](https:\u002F\u002Fdiscord.com\u002Finvite\u002FG7zxfUzkm7) and share your ideas and what you've built with React Grab.\n\nFind a bug? Head over to our [issue tracker](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fissues) and we'll do our best to help. We love pull requests, too!\n\nWe expect all contributors to abide by the terms of our [Code of Conduct](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002F.github\u002FCODE_OF_CONDUCT.md).\n\n[**Start contributing on GitHub**](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Freact-grab\u002Fblob\u002Fmain\u002FCONTRIBUTING.md)\n\n### License\n\nReact Grab is MIT-licensed open-source software.\n\n_Thank you to [Andrew Luetgers](https:\u002F\u002Fgithub.com\u002Fandrewluetgers) for donating the `grab` npm package name._\n","React Grab 是一个用于复制任何UI元素以便于开发者或自动化代理使用的工具。其核心功能是通过简单的复制操作，将选定的UI元素连同其源代码位置、附近代码以及组件堆栈信息一并提取出来，极大地提高了编辑速度和准确性。该工具使用TypeScript编写，并且支持多种前端框架如Next.js、Vite等，方便集成到现有的开发环境中。适用于需要频繁修改界面布局或调试前端应用的场景，尤其是对于希望加速开发流程、提高工作效率的团队来说非常实用。",2,"2026-06-11 03:45:53","high_star"]