Manual Installation

For custom React setups, unsupported frameworks, or when automatic installation doesn’t work, you can manually integrate React Grab using one of the methods below.

Installation Methods

Choose the method that best fits your setup:

CDN Script

Quick setup with a script tag

NPM Package

Install as a development dependency

HTML Script

Add directly to your HTML file

Dynamic Import

Import conditionally in JavaScript

CDN Script

The fastest way to add React Grab to any project:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    <script>
      if (process.env.NODE_ENV === "development") {
        const script = document.createElement("script");
        script.src = "//unpkg.com/react-grab/dist/index.global.js";
        script.crossOrigin = "anonymous";
        document.head.appendChild(script);
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

The CDN method requires that process.env.NODE_ENV is defined. Some build tools may not provide this variable.

NPM Package

For projects with a module bundler:

Install the package

npm install react-grab

Import in your entry file

Add this at the top of your main JavaScript/TypeScript file:

src/index.tsx

if (process.env.NODE_ENV === "development") {
  import("react-grab");
}

// Your app code here
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

HTML Script

For static HTML files or simple setups without build tools:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
    <!-- Only load in development -->
    <script>
      // Check if we're in development (you can use your own logic here)
      const isDevelopment = window.location.hostname === "localhost" ||
                            window.location.hostname === "127.0.0.1" ||
                            window.location.hostname === "";
      
      if (isDevelopment) {
        const script = document.createElement("script");
        script.src = "//unpkg.com/react-grab/dist/index.global.js";
        script.crossOrigin = "anonymous";
        document.head.appendChild(script);
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script src="/your-app.js"></script>
  </body>
</html>

This method uses hostname detection to determine if you’re in development. Adjust the condition based on your setup.

Dynamic Import

For advanced setups with custom module loading:

src/index.tsx

// Conditional import with error handling
if (process.env.NODE_ENV === "development") {
  import("react-grab")
    .then(() => {
      console.log("React Grab loaded");
    })
    .catch((error) => {
      console.warn("Failed to load React Grab:", error);
    });
}

// Rest of your app
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

Environment Detection

Different frameworks and build tools use different methods to detect the environment:

if (process.env.NODE_ENV === "development") {
  import("react-grab");
}

if (import.meta.env.DEV) {
  import("react-grab");
}

if (process.env.NODE_ENV === "development") {
  import("react-grab");
}

if (process.env.NODE_ENV === "development") {
  import("react-grab");
}

if (process.env.NODE_ENV === "development") {
  import("react-grab");
}

if (window.location.hostname === "localhost") {
  // Load React Grab
}

Framework-Specific Guides

For detailed instructions on supported frameworks:

Next.js

App Router and Pages Router integration

Vite

Vite-based React projects

Webpack

Webpack-based React projects

TanStack Start

TanStack Start integration

Unsupported Frameworks

React Grab currently doesn’t have automatic setup for:

Remix: Manual CDN script in root.tsx
Astro: Manual script in layout component
Gatsby: Manual plugin or HTML script
SvelteKit: Not applicable (Svelte-specific)

For these frameworks, use the CDN Script or NPM Package method and adapt to your framework’s structure.

Verification Steps

After manual installation, verify React Grab is working:

Start your development server

Use your framework’s dev command (e.g., npm run dev, npm start).

Open browser console

Check for any errors related to React Grab loading.

Test the copy feature

Hover over any UI element
Press ⌘C (Mac) or Ctrl+C (Windows/Linux)

Check your clipboard for the copied context:

<div class="my-component">...</div>
in MyComponent at src/components/MyComponent.tsx:42:8

Verify production exclusion

Build for production and ensure React Grab is not included in the bundle.

Common Issues

React Grab not loading

Check the environment condition: Make sure your development environment check is correct:

// Common checks
console.log(process.env.NODE_ENV); // Should be "development"
console.log(import.meta.env.DEV); // Should be true (Vite)
console.log(window.location.hostname); // Should be "localhost" or "127.0.0.1"

Check the browser console: Look for any error messages related to loading React Grab.

CORS errors with CDN

If you see CORS errors when loading from unpkg.com:

Ensure you’re using crossOrigin="anonymous" on the script tag
Try using https:// instead of // in the CDN URL
Consider using the NPM package method instead

Module not found errors

If you see “Cannot find module ‘react-grab’”:

Install the package: npm install react-grab
Restart your development server
Clear any build cache

Loading in production builds

If React Grab is loading in production:

Verify your environment check is correct
Ensure your build tool is configured to replace environment variables
Check that tree-shaking is enabled in your bundler

TypeScript errors

If you get TypeScript errors:

npm install -D @types/react-grab

Or add a type declaration:

src/react-grab.d.ts

declare module "react-grab" {
  const ReactGrab: any;
  export default ReactGrab;
}

Advanced Configuration

For advanced use cases, you can configure React Grab programmatically:

src/index.tsx

if (process.env.NODE_ENV === "development") {
  import("react-grab").then(() => {
    // Configure React Grab after it loads
    if (window.__REACT_GRAB__) {
      window.__REACT_GRAB__.configure({
        activationKey: "g",
        activationMode: "toggle",
        maxContextLines: 5,
      });
    }
  });
}

See the Configuration API for all available options.

Need Help?

If you’re having trouble with manual installation:

Check the troubleshooting guide
Search existing GitHub issues
Ask in the Discord community
Open a new issue with your setup details

Next Steps

Connect to Agent

Set up React Grab with your AI coding assistant

Configure Options

Customize activation keys and behavior

Get Started

Core Concepts

Guides

Integrations

Advanced

Installation Methods

CDN Script

NPM Package

HTML Script

Dynamic Import

CDN Script

NPM Package

HTML Script

Dynamic Import

Environment Detection

Framework-Specific Guides

Next.js

Vite

Webpack

TanStack Start

Unsupported Frameworks

Verification Steps

Common Issues

Advanced Configuration

Need Help?

Next Steps

Connect to Agent

Configure Options

​Installation Methods

CDN Script

NPM Package

HTML Script

Dynamic Import

​CDN Script

​NPM Package

​HTML Script

​Dynamic Import

​Environment Detection

​Framework-Specific Guides

Next.js

Vite

Webpack

TanStack Start

​Unsupported Frameworks

​Verification Steps

​Common Issues

​Advanced Configuration

​Need Help?

​Next Steps

Connect to Agent

Configure Options

Installation Methods

CDN Script

NPM Package

HTML Script

Dynamic Import

Environment Detection

Framework-Specific Guides

Unsupported Frameworks

Verification Steps

Common Issues

Advanced Configuration

Need Help?

Next Steps