react-grab 0.0.67 → 0.0.69
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 +57 -5
- package/dist/{chunk-IZU7ETT6.cjs → chunk-IOHFY7DR.cjs} +256 -120
- package/dist/{chunk-YPAQIOAG.js → chunk-IXLVOV7G.js} +257 -120
- package/dist/{core-CZmmuMr9.d.cts → core-CnnkNbYQ.d.cts} +1 -85
- package/dist/{core-CZmmuMr9.d.ts → core-CnnkNbYQ.d.ts} +1 -85
- package/dist/core.cjs +7 -11
- package/dist/core.d.cts +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/core.js +1 -1
- package/dist/index.cjs +8 -8
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.global.js +26 -26
- package/dist/index.js +2 -2
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,12 +16,14 @@ https://github.com/user-attachments/assets/fdb34329-b471-4b39-b433-0b1a27a94bd8
|
|
|
16
16
|
|
|
17
17
|
> [**Install using Cursor**](https://cursor.com/link/prompt?text=1.+Run+curl+-s+https%3A%2F%2Freact-grab.com%2Fllms.txt+%0A2.+Understand+the+content+and+follow+the+instructions+to+install+React+Grab.%0A3.+Tell+the+user+to+refresh+their+local+app+and+explain+how+to+use+React+Grab)
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
Run this command to install React Grab into your project. Ensure you are running at project root (e.g. where the `next.config.ts` or `vite.config.ts` file is located).
|
|
20
20
|
|
|
21
21
|
```html
|
|
22
|
-
|
|
22
|
+
npx @react-grab/cli@latest
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
+
## Manual Installation
|
|
26
|
+
|
|
25
27
|
If you're using a React framework or build tool, view instructions below:
|
|
26
28
|
|
|
27
29
|
#### Next.js (App router)
|
|
@@ -224,6 +226,58 @@ export default function RootLayout({ children }) {
|
|
|
224
226
|
}
|
|
225
227
|
```
|
|
226
228
|
|
|
229
|
+
### Opencode
|
|
230
|
+
|
|
231
|
+
#### Server Setup
|
|
232
|
+
|
|
233
|
+
The server runs on port `6567` and interfaces with the Opencode CLI. Add to your `package.json`:
|
|
234
|
+
|
|
235
|
+
```json
|
|
236
|
+
{
|
|
237
|
+
"scripts": {
|
|
238
|
+
"dev": "npx @react-grab/opencode@latest && next dev"
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
> **Note:** You must have [Opencode](https://opencode.ai) installed (`npm i -g opencode-ai@latest`).
|
|
244
|
+
|
|
245
|
+
#### Client Setup
|
|
246
|
+
|
|
247
|
+
```html
|
|
248
|
+
<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
|
|
249
|
+
<!-- add this in the <head> -->
|
|
250
|
+
<script src="//unpkg.com/@react-grab/opencode/dist/client.global.js"></script>
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
Or using Next.js `Script` component in your `app/layout.tsx`:
|
|
254
|
+
|
|
255
|
+
```jsx
|
|
256
|
+
import Script from "next/script";
|
|
257
|
+
|
|
258
|
+
export default function RootLayout({ children }) {
|
|
259
|
+
return (
|
|
260
|
+
<html>
|
|
261
|
+
<head>
|
|
262
|
+
{process.env.NODE_ENV === "development" && (
|
|
263
|
+
<>
|
|
264
|
+
<Script
|
|
265
|
+
src="//unpkg.com/react-grab/dist/index.global.js"
|
|
266
|
+
strategy="beforeInteractive"
|
|
267
|
+
/>
|
|
268
|
+
<Script
|
|
269
|
+
src="//unpkg.com/@react-grab/opencode/dist/client.global.js"
|
|
270
|
+
strategy="lazyOnload"
|
|
271
|
+
/>
|
|
272
|
+
</>
|
|
273
|
+
)}
|
|
274
|
+
</head>
|
|
275
|
+
<body>{children}</body>
|
|
276
|
+
</html>
|
|
277
|
+
);
|
|
278
|
+
}
|
|
279
|
+
```
|
|
280
|
+
|
|
227
281
|
## Extending React Grab
|
|
228
282
|
|
|
229
283
|
React Grab provides an public customization API. Check out the [type definitions](https://github.com/aidenybai/react-grab/blob/main/packages/react-grab/src/types.ts) to see all available options for extending React Grab.
|
|
@@ -239,9 +293,7 @@ const api = init({
|
|
|
239
293
|
enabled: false, // disable crosshair
|
|
240
294
|
},
|
|
241
295
|
elementLabel: {
|
|
242
|
-
|
|
243
|
-
backgroundColor: "#000000",
|
|
244
|
-
textColor: "#ffffff",
|
|
296
|
+
enabled: false, // disable element label
|
|
245
297
|
},
|
|
246
298
|
},
|
|
247
299
|
|