Skip to main content

​
Overview

React Grab exports several utility functions for advanced use cases. These functions provide low-level access to React Grab’s internals.

​
Functions

​
getStack()

function getStack(element: Element): Promise<StackFrame[] | null>
Get the React stack frames for a given element. Returns stack information from React’s internal fiber tree.
​
element
Element
required
The DOM element to get stack information for
​
stackFrames
StackFrame[] | null
Array of stack frames containing component information, or null if instrumentation is not active
Example: 
import { getStack } from 'react-grab';

const element = document.querySelector('.my-component');
const stack = await getStack(element);
console.log(stack);

​
formatElementInfo()

function formatElementInfo(element: Element): Promise<string>
Format element information into a human-readable string. This is the same formatting used when copying element context.
​
element
Element
required
The DOM element to format information for
​
info
string
Formatted string containing element context (tag name, component name, file path, line number)
Example: 
import { formatElementInfo } from 'react-grab';

const element = document.querySelector('.my-component');
const info = await formatElementInfo(element);
console.log(info);
// Output: <div class="my-component" />
// in MyComponent at components/my-component.tsx:42:5

​
isInstrumentationActive()

function isInstrumentationActive(): boolean
Check if React instrumentation is currently active. Returns true if React Grab can access React’s internal fiber tree for debugging.
​
active
boolean
Whether React instrumentation is active
Example: 
import { isInstrumentationActive } from 'react-grab';

if (isInstrumentationActive()) {
  console.log('React Grab can access React internals');
} else {
  console.warn('React instrumentation not available');
}

​
getGlobalApi()

function getGlobalApi(): ReactGrabAPI | null
Get the global React Grab API instance. Returns the API instance stored in window.__REACT_GRAB__ or the internal global reference.
​
api
ReactGrabAPI | null
The global API instance, or null if React Grab has not been initialized
Example: 
import { getGlobalApi } from 'react-grab';

const api = getGlobalApi();
if (api) {
  api.activate();
}

​
setGlobalApi()

function setGlobalApi(api: ReactGrabAPI | null): void
Set or clear the global React Grab API instance. This updates both window.__REACT_GRAB__ and the internal global reference.
​
api
ReactGrabAPI | null
required
The API instance to set globally, or null to clear
Example: 
import { init, setGlobalApi } from 'react-grab';

const api = init();
setGlobalApi(api);

// Later, to cleanup:
setGlobalApi(null);

​
generateSnippet()

function generateSnippet(element: Element): string
Generate an HTML snippet representation of an element. Useful for creating preview snippets or copying HTML structure.
​
element
Element
required
The DOM element to generate a snippet for
​
snippet
string
HTML string representation of the element
Example: 
import { generateSnippet } from 'react-grab';

const element = document.querySelector('.my-component');
const snippet = generateSnippet(element);
console.log(snippet);
// Output: <div class="my-component">...</div>

​
Constants

​
DEFAULT_THEME

const DEFAULT_THEME: Required<Theme>
The default theme configuration used by React Grab. Contains all theme properties with their default values. Example: 
import { init, DEFAULT_THEME } from 'react-grab';

const api = init({
  // Start with defaults and override specific properties
  theme: {
    ...DEFAULT_THEME,
    hue: 280,
  },
});

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us