Utility Functions

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

required

The DOM element to get stack information for

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

required

The DOM element to format information for

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.

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.

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.

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

required

The DOM element to generate a snippet for

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,
  },
});

Core API

Types

React Integration

CLI

Overview

Functions

getStack()

formatElementInfo()

isInstrumentationActive()

getGlobalApi()

setGlobalApi()

generateSnippet()

Constants

DEFAULT_THEME

See Also

​Overview

​Functions

​getStack()

​formatElementInfo()

​isInstrumentationActive()

​getGlobalApi()

​setGlobalApi()

​generateSnippet()

​Constants

​DEFAULT_THEME

​See Also

Overview

Functions

getStack()

formatElementInfo()

isInstrumentationActive()

getGlobalApi()

setGlobalApi()

generateSnippet()

Constants

DEFAULT_THEME

See Also