Skip to main content

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.

​
Theme

The Theme interface controls the appearance and visibility of all React Grab UI components. Each visual element can be individually toggled and customized.

​
Properties

​
enabled
boolean
default:"true"
Globally toggle the entire overlay. When disabled, all React Grab UI elements are hidden.
​
hue
number
default:"0"
Base hue (0-360) used to generate colors throughout the interface using HSL color space. This creates a cohesive color scheme across all UI elements.
​
selectionBox
object
The highlight box that appears when hovering over an element before selecting it.
​
dragBox
object
The rectangular selection area that appears when clicking and dragging to select multiple elements.
​
grabbedBoxes
object
Brief flash/highlight boxes that appear on elements immediately after they’re successfully grabbed/copied.
​
elementLabel
object
The floating label that follows the cursor showing information about the currently hovered element.
​
crosshair
object
The crosshair cursor overlay that helps with precise element targeting.
​
toolbar
object
The floating toolbar that allows toggling React Grab activation.

​
Usage

​
Basic Theme Configuration

import { useReactGrab } from 'react-grab';

function App() {
  const reactGrab = useReactGrab({
    theme: {
      hue: 200, // Blue theme
      crosshair: {
        enabled: false // Hide crosshair
      }
    }
  });

  return <div>{/* Your app */}</div>;
}

​
Plugin Theme Customization

import { Plugin } from 'react-grab';

const myPlugin: Plugin = {
  name: 'my-plugin',
  theme: {
    hue: 120, // Green theme
    toolbar: {
      enabled: false // Hide toolbar
    },
    grabbedBoxes: {
      enabled: true // Show success flash
    }
  }
};

​
Dynamic Theme Updates

function ThemeSwitcher() {
  const reactGrab = useReactGrab();
  
  const setDarkTheme = () => {
    reactGrab.setOptions({
      theme: {
        hue: 220,
        enabled: true
      }
    });
  };
  
  const setLightTheme = () => {
    reactGrab.setOptions({
      theme: {
        hue: 180,
        enabled: true
      }
    });
  };
  
  return (
    <div>
      <button onClick={setDarkTheme}>Dark</button>
      <button onClick={setLightTheme}>Light</button>
    </div>
  );
}

​
Type Definition

export interface Theme {
  enabled?: boolean;
  hue?: number;
  selectionBox?: {
    enabled?: boolean;
  };
  dragBox?: {
    enabled?: boolean;
  };
  grabbedBoxes?: {
    enabled?: boolean;
  };
  elementLabel?: {
    enabled?: boolean;
  };
  crosshair?: {
    enabled?: boolean;
  };
  toolbar?: {
    enabled?: boolean;
  };
}

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us