react-grab 0.0.97 → 0.0.98
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -3
- package/dist/chunk-D2FWI6AP.js +88 -0
- package/dist/chunk-H4U7EPBM.cjs +88 -0
- package/dist/cli.cjs +875 -158
- package/dist/core/index.cjs +1 -1
- package/dist/core/index.d.cts +1 -1
- package/dist/core/index.d.ts +1 -1
- package/dist/core/index.js +1 -1
- package/dist/{index-RhgdSH9U.d.cts → index-r1odQUH0.d.cts} +31 -7
- package/dist/{index-RhgdSH9U.d.ts → index-r1odQUH0.d.ts} +31 -7
- package/dist/index.cjs +2 -2
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.global.js +26 -34
- package/dist/index.js +1 -1
- package/dist/styles.css +1 -1
- package/package.json +3 -5
- package/dist/chunk-K6AYIDZE.js +0 -94
- package/dist/chunk-QVFHXAET.cjs +0 -94
package/README.md
CHANGED
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
|
|
7
7
|
Select context for coding agents directly from your website
|
|
8
8
|
|
|
9
|
-
How? Point at any element and
|
|
9
|
+
How? Point at any element and press **⌘C** (Mac) or **Ctrl+C** (Windows/Linux) to copy the file name, React component, and HTML source code.
|
|
10
10
|
|
|
11
11
|
It makes tools like Cursor, Claude Code, Copilot run up to [**3× faster**](https://react-grab.com/blog/intro) and more accurate.
|
|
12
12
|
|
|
13
13
|
### [Try out a demo! →](https://react-grab.com)
|
|
14
14
|
|
|
15
|
-
https://github.com/
|
|
15
|
+
|
|
16
16
|
|
|
17
17
|
## Install
|
|
18
18
|
|
|
@@ -22,6 +22,22 @@ Run this command to install React Grab into your project. Ensure you are running
|
|
|
22
22
|
npx grab@latest init
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
Once installed, hover over any UI element in your browser and press:
|
|
28
|
+
|
|
29
|
+
- **⌘C** (Cmd+C) on Mac
|
|
30
|
+
- **Ctrl+C** on Windows/Linux
|
|
31
|
+
|
|
32
|
+
This copies the element's context (file name, React component, and HTML source code) to your clipboard ready to paste into your coding agent. For example:
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
<a class="ml-auto inline-block text-sm" href="#">
|
|
36
|
+
Forgot your password?
|
|
37
|
+
</a>
|
|
38
|
+
in LoginForm at components/login-form.tsx:46:19
|
|
39
|
+
```
|
|
40
|
+
|
|
25
41
|
## Manual Installation
|
|
26
42
|
|
|
27
43
|
If you're using a React framework or build tool, view instructions below:
|
|
@@ -124,7 +140,9 @@ if (process.env.NODE_ENV === "development") {
|
|
|
124
140
|
|
|
125
141
|
React Grab can send selected element context directly to your coding agent. This enables a workflow where you select a UI element and an agent automatically makes changes to your codebase.
|
|
126
142
|
|
|
127
|
-
This means **no copying and pasting** - just select the element and let the agent do the rest. [
|
|
143
|
+
This means **no copying and pasting** - just select the element and let the agent do the rest. [Read more about coding agent integration →](https://react-grab.com/blog/agent)
|
|
144
|
+
|
|
145
|
+
> **Click to expand** setup instructions for your coding agent:
|
|
128
146
|
|
|
129
147
|
<details>
|
|
130
148
|
<summary><strong>Claude Code</strong></summary>
|