> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/aidenybai/react-grab/llms.txt
> Use this file to discover all available pages before exploring further.
# Manual Installation
> Install React Grab in custom setups and frameworks not covered by automatic 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:
Quick setup with a script tag
Install as a development dependency
Add directly to your HTML file
Import conditionally in JavaScript
## CDN Script
The fastest way to add React Grab to any project:
```html index.html theme={null}
My App
```
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:
```bash theme={null}
npm install react-grab
```
Add this at the top of your main JavaScript/TypeScript file:
```tsx src/index.tsx theme={null}
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();
```
## HTML Script
For static HTML files or simple setups without build tools:
```html index.html theme={null}
My App
```
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:
```tsx src/index.tsx theme={null}
// 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();
```
## Environment Detection
Different frameworks and build tools use different methods to detect the environment:
```js Webpack theme={null}
if (process.env.NODE_ENV === "development") {
import("react-grab");
}
```
```js Vite theme={null}
if (import.meta.env.DEV) {
import("react-grab");
}
```
```js Parcel theme={null}
if (process.env.NODE_ENV === "development") {
import("react-grab");
}
```
```js Rollup theme={null}
if (process.env.NODE_ENV === "development") {
import("react-grab");
}
```
```js esbuild theme={null}
if (process.env.NODE_ENV === "development") {
import("react-grab");
}
```
```js Plain HTML theme={null}
if (window.location.hostname === "localhost") {
// Load React Grab
}
```
## Framework-Specific Guides
For detailed instructions on supported frameworks:
App Router and Pages Router integration
Vite-based React projects
Webpack-based React projects
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](#cdn-script) or [NPM Package](#npm-package) method and adapt to your framework's structure.
## Verification Steps
After manual installation, verify React Grab is working:
Use your framework's dev command (e.g., `npm run dev`, `npm start`).
Check for any errors related to React Grab loading.
* Hover over any UI element
* Press **⌘C** (Mac) or **Ctrl+C** (Windows/Linux)
* Check your clipboard for the copied context:
```
...
in MyComponent at src/components/MyComponent.tsx:42:8
```
Build for production and ensure React Grab is not included in the bundle.
## Common Issues
**Check the environment condition**: Make sure your development environment check is correct:
```js theme={null}
// 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.
If you see CORS errors when loading from unpkg.com:
1. Ensure you're using `crossOrigin="anonymous"` on the script tag
2. Try using `https://` instead of `//` in the CDN URL
3. Consider using the NPM package method instead
If you see "Cannot find module 'react-grab'":
1. Install the package: `npm install react-grab`
2. Restart your development server
3. Clear any build cache
If React Grab is loading in production:
1. Verify your environment check is correct
2. Ensure your build tool is configured to replace environment variables
3. Check that tree-shaking is enabled in your bundler
If you get TypeScript errors:
```bash theme={null}
npm install -D @types/react-grab
```
Or add a type declaration:
```ts src/react-grab.d.ts theme={null}
declare module "react-grab" {
const ReactGrab: any;
export default ReactGrab;
}
```
## Advanced Configuration
For advanced use cases, you can configure React Grab programmatically:
```tsx src/index.tsx theme={null}
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](/api/options) for all available options.
## Need Help?
If you're having trouble with manual installation:
1. Check the [troubleshooting guide](/installation#troubleshooting)
2. Search existing [GitHub issues](https://github.com/aidenybai/react-grab/issues)
3. Ask in the [Discord community](https://discord.com/invite/G7zxfUzkm7)
4. [Open a new issue](https://github.com/aidenybai/react-grab/issues/new) with your setup details
## Next Steps
Set up React Grab with your AI coding assistant
Customize activation keys and behavior
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.