Add shadcn registry component

README.md

@@ -33,6 +33,29 @@ The copied context includes the selected element and its component stack with so
 
 ## Manual Installation
 
+### shadcn Registry
+
+Install the React Grab component from this GitHub registry:
+
+```bash
+npx shadcn@latest add aidenybai/react-grab/react-grab
+```
+
+Render it once near the root of your app:
+
+```tsx
+import { ReactGrab } from "@/components/react-grab";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {children}
+      {process.env.NODE_ENV === "development" && <ReactGrab />}
+    </>
+  );
+}
+```
+
 If you cannot use the CLI, install React Grab manually for your framework:
 
 #### Next.js (App router)

packages/grab/README.md

@@ -33,6 +33,29 @@ The copied context includes the selected element and its component stack with so
 
 ## Manual Installation
 
+### shadcn Registry
+
+Install the React Grab component from this GitHub registry:
+
+```bash
+npx shadcn@latest add aidenybai/react-grab/react-grab
+```
+
+Render it once near the root of your app:
+
+```tsx
+import { ReactGrab } from "@/components/react-grab";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {children}
+      {process.env.NODE_ENV === "development" && <ReactGrab />}
+    </>
+  );
+}
+```
+
 If you cannot use the CLI, install React Grab manually for your framework:
 
 #### Next.js (App router)

packages/react-grab/README.md

@@ -33,6 +33,29 @@ The copied context includes the selected element and its component stack with so
 
 ## Manual Installation
 
+### shadcn Registry
+
+Install the React Grab component from this GitHub registry:
+
+```bash
+npx shadcn@latest add aidenybai/react-grab/react-grab
+```
+
+Render it once near the root of your app:
+
+```tsx
+import { ReactGrab } from "@/components/react-grab";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {children}
+      {process.env.NODE_ENV === "development" && <ReactGrab />}
+    </>
+  );
+}
+```
+
 If you cannot use the CLI, install React Grab manually for your framework:
 
 #### Next.js (App router)

registry.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "react-grab",
+  "homepage": "https://react-grab.com",
+  "items": [
+    {
+      "name": "react-grab",
+      "type": "registry:component",
+      "title": "React Grab",
+      "description": "Installs and loads React Grab from a React component.",
+      "dependencies": ["react-grab"],
+      "files": [
+        {
+          "path": "registry/react-grab.tsx",
+          "type": "registry:component",
+          "target": "@components/react-grab.tsx"
+        }
+      ]
+    }
+  ]
+}

registry/react-grab.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useEffect } from "react";
+import type { Options } from "react-grab";
+
+declare global {
+  interface Window {
+    __REACT_GRAB_DISABLED__?: boolean;
+  }
+}
+
+interface ReactGrabProps {
+  enabled?: boolean;
+  options?: Options;
+}
+
+const reactGrabOptions: Options = {
+  // activationMode: "toggle",
+  // activationKey: "Alt+KeyG",
+  // keyHoldDuration: 500,
+  // allowActivationInsideInput: true,
+};
+
+export const ReactGrab = (props: ReactGrabProps) => {
+  useEffect(() => {
+    if (props.enabled === false) return;
+
+    let isActive = true;
+
+    const loadReactGrab = async () => {
+      window.__REACT_GRAB_DISABLED__ = true;
+      try {
+        const reactGrab = await import("react-grab");
+
+        if (!isActive) return;
+
+        const existingApi = reactGrab.getGlobalApi();
+        if (existingApi) return;
+
+        const api = reactGrab.init({
+          ...reactGrabOptions,
+          ...props.options,
+        });
+
+        reactGrab.setGlobalApi(api);
+        window.dispatchEvent(new CustomEvent("react-grab:init", { detail: api }));
+      } finally {
+        delete window.__REACT_GRAB_DISABLED__;
+      }
+    };
+
+    void loadReactGrab();
+
+    return () => {
+      isActive = false;
+    };
+  }, [props.enabled, props.options]);
+
+  return null;
+};