Skip to main content
React Grab integrates with Webpack-based projects through your main entry file, leveraging Webpack’s module system for optimal loading.

​
Automatic Installation

Let the CLI handle the setup for you:
1

Run the CLI

Navigate to your project root and run:
npx -y grab@latest init
The CLI will detect your Webpack setup and configure React Grab automatically.
2

Start your dev server

Launch your Webpack development server:
npm start
# or
npm run dev
3

Verify installation

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

​
Manual Installation

For manual setup or custom configurations:
1

Install React Grab

Add React Grab as a development dependency:
npm install react-grab
2

Update your entry file

Add this code at the top of your main entry file (e.g., src/index.tsx or src/main.tsx):
src/index.tsx
if (process.env.NODE_ENV === "development") {
  import("react-grab");
}

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
Place the import at the top of your entry file, before any other imports. This ensures React Grab initializes before your React application.

​
How It Works

Webpack’s conditional compilation and tree-shaking work together to optimize React Grab:
  1. Development: When process.env.NODE_ENV === "development", the dynamic import executes and React Grab loads
  2. Production: Webpack’s DefinePlugin replaces process.env.NODE_ENV with "production", making the condition false
  3. Tree-shaking: Dead code elimination removes the entire import statement from your production bundle
This ensures zero production overhead.

​
Webpack Configuration

Most Webpack setups include the DefinePlugin by default. If you have a custom configuration, ensure you have:
webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ... other config
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    }),
    // ... other plugins
  ]
};
Create React App, Next.js with Webpack, and most modern Webpack setups include this configuration automatically.

​
Common Entry Files

React Grab should be added to your main entry file. Common locations include:
  • src/index.tsx or src/index.js (Create React App)
  • src/main.tsx or src/main.js (Vite-style projects)
  • src/app.tsx or src/app.js (custom setups)
  • Any file specified as entry in your webpack.config.js
If you’re unsure which file to modify, check your webpack.config.js:
webpack.config.js
module.exports = {
  entry: './src/index.tsx', // This is your entry file
  // ...
};

​
Verification

1

Start development mode

npm start
Open your browser console and check for any errors.
2

Test React Grab

  • Hover over any UI element
  • Press ⌘C (Mac) or Ctrl+C (Windows/Linux)
  • Verify the context is copied to your clipboard
3

Verify production exclusion

Build for production and check the bundle:
npm run build
React Grab should not appear in your production bundle. You can verify this by:
  • Checking the bundle size (should be unchanged)
  • Searching for “react-grab” in your build output (should not be found)

​
Common Issues

Ensure React Grab is installed:
npm install react-grab
Then restart your dev server.
Your Webpack configuration may be missing the DefinePlugin. Add it to your webpack.config.js:
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    })
  ]
};
Verify your build script sets NODE_ENV to production:
package.json
{
  "scripts": {
    "build": "NODE_ENV=production webpack --mode production"
  }
}
On Windows, use cross-env:
npm install -D cross-env
package.json
{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --mode production"
  }
}
If TypeScript complains about the dynamic import, ensure your tsconfig.json has:
{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node"
  }
}

​
Create React App

If you’re using Create React App (CRA), follow the standard manual installation:
  1. Install React Grab: npm install react-grab
  2. Add the import to src/index.tsx or src/index.js
  3. Start your dev server: npm start
CRA’s Webpack configuration already includes all necessary plugins.
CRA’s production build automatically strips development-only code, so React Grab will be excluded from your production bundle.

​
Next Steps

Agent Integration

Connect React Grab to Cursor, Claude, or other AI assistants

Configuration

Customize activation behavior and options

Build docs developers (and LLMs) love

Get started for freeTalk to us