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 Globally toggle the entire overlay. When disabled, all React Grab UI elements are hidden.
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.
The highlight box that appears when hovering over an element before selecting it. Whether to show the selection highlight.
The rectangular selection area that appears when clicking and dragging to select multiple elements. Whether to show the drag selection box.
Brief flash/highlight boxes that appear on elements immediately after they’re successfully grabbed/copied. Whether to show these success flash effects.
The floating label that follows the cursor showing information about the currently hovered element. Whether to show the label.
The crosshair cursor overlay that helps with precise element targeting. Whether to show the crosshair.
The floating toolbar that allows toggling React Grab activation. Whether to show the toolbar.
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 