react-grab 0.0.66 → 0.0.68
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 +53 -3
- package/dist/{chunk-IJU362TN.js → chunk-6DG5DJMI.js} +277 -107
- package/dist/{chunk-XNHS7LR5.cjs → chunk-VMN6HO3J.cjs} +276 -107
- 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
|
@@ -224,6 +224,58 @@ export default function RootLayout({ children }) {
|
|
|
224
224
|
}
|
|
225
225
|
```
|
|
226
226
|
|
|
227
|
+
### Opencode
|
|
228
|
+
|
|
229
|
+
#### Server Setup
|
|
230
|
+
|
|
231
|
+
The server runs on port `6567` and interfaces with the Opencode CLI. Add to your `package.json`:
|
|
232
|
+
|
|
233
|
+
```json
|
|
234
|
+
{
|
|
235
|
+
"scripts": {
|
|
236
|
+
"dev": "npx @react-grab/opencode@latest && next dev"
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
> **Note:** You must have [Opencode](https://opencode.ai) installed (`npm i -g opencode-ai@latest`).
|
|
242
|
+
|
|
243
|
+
#### Client Setup
|
|
244
|
+
|
|
245
|
+
```html
|
|
246
|
+
<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
|
|
247
|
+
<!-- add this in the <head> -->
|
|
248
|
+
<script src="//unpkg.com/@react-grab/opencode/dist/client.global.js"></script>
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
Or using Next.js `Script` component in your `app/layout.tsx`:
|
|
252
|
+
|
|
253
|
+
```jsx
|
|
254
|
+
import Script from "next/script";
|
|
255
|
+
|
|
256
|
+
export default function RootLayout({ children }) {
|
|
257
|
+
return (
|
|
258
|
+
<html>
|
|
259
|
+
<head>
|
|
260
|
+
{process.env.NODE_ENV === "development" && (
|
|
261
|
+
<>
|
|
262
|
+
<Script
|
|
263
|
+
src="//unpkg.com/react-grab/dist/index.global.js"
|
|
264
|
+
strategy="beforeInteractive"
|
|
265
|
+
/>
|
|
266
|
+
<Script
|
|
267
|
+
src="//unpkg.com/@react-grab/opencode/dist/client.global.js"
|
|
268
|
+
strategy="lazyOnload"
|
|
269
|
+
/>
|
|
270
|
+
</>
|
|
271
|
+
)}
|
|
272
|
+
</head>
|
|
273
|
+
<body>{children}</body>
|
|
274
|
+
</html>
|
|
275
|
+
);
|
|
276
|
+
}
|
|
277
|
+
```
|
|
278
|
+
|
|
227
279
|
## Extending React Grab
|
|
228
280
|
|
|
229
281
|
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 +291,7 @@ const api = init({
|
|
|
239
291
|
enabled: false, // disable crosshair
|
|
240
292
|
},
|
|
241
293
|
elementLabel: {
|
|
242
|
-
|
|
243
|
-
backgroundColor: "#000000",
|
|
244
|
-
textColor: "#ffffff",
|
|
294
|
+
enabled: false, // disable element label
|
|
245
295
|
},
|
|
246
296
|
},
|
|
247
297
|
|