0
# React Inspector
1

2
React Inspector brings the power of Browser DevTools inspectors directly into React applications. It provides three main inspector components for displaying JavaScript objects in a hierarchical tree view (ObjectInspector), tabular data display (TableInspector), and DOM node examination (DOMInspector). The library supports extensive customization through themes, expandable tree nodes, sortable object keys, and custom node renderers.
3

4
## Package Information
5

6
- **Package Name**: react-inspector
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-inspector`
10

11
## Core Imports
12

13
```typescript
14
import { 
15
  Inspector, 
16
  ObjectInspector, 
17
  TableInspector,
18
  ObjectLabel,
19
  ObjectRootLabel,
20
  ObjectPreview,
21
  ObjectValue,
22
  ObjectName,
23
  chromeLight,
24
  chromeDark
25
} from "react-inspector";
26
```
27

28
For CommonJS:
29

30
```javascript
31
const { 
32
  Inspector, 
33
  ObjectInspector, 
34
  TableInspector,
35
  ObjectLabel,
36
  ObjectRootLabel,
37
  ObjectPreview,
38
  ObjectValue,
39
  ObjectName,
40
  chromeLight,
41
  chromeDark
42
} = require("react-inspector");
43
```
44

45
## Basic Usage
46

47
```typescript
48
import React from "react";
49
import { Inspector, ObjectInspector, TableInspector } from "react-inspector";
50

51
const MyComponent = () => {
52
  const data = {
53
    user: { name: "Alice", age: 30, active: true },
54
    items: [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }],
55
    metadata: { created: new Date(), tags: ["important", "demo"] }
56
  };
57

58
  return (
59
    <div>
60
      {/* Universal inspector - automatically selects appropriate type */}
61
      <Inspector data={data} />
62
      
63
      {/* Table view */}
64
      <Inspector table data={data.items} />
65
      
66
      {/* Object tree view with expanded first level */}
67
      <ObjectInspector data={data} expandLevel={1} />
68
      
69
      {/* Tabular display */}
70
      <TableInspector data={data.items} />
71
    </div>
72
  );
73
};
74
```
75

76
## Architecture
77

78
React Inspector is built around several key components:
79

80
- **Universal Inspector**: `Inspector` component that automatically selects the appropriate inspector type based on data
81
- **Tree-based Inspection**: `ObjectInspector` for hierarchical object exploration with expandable nodes
82
- **Table-based Inspection**: `TableInspector` for tabular data display similar to console.table
83
- **DOM Inspection**: `DOMInspector` for examining DOM nodes in a tree structure
84
- **Theming System**: Customizable themes with Chrome DevTools light/dark presets
85
- **State Management**: Tree expansion state persistence across component unmounting
86

87
## Capabilities
88

89
### Universal Inspector
90

91
The main `Inspector` component that automatically selects the appropriate inspector type based on the provided data. Provides a simple interface for most use cases.
92

93
```typescript { .api }
94
/**
95
 * Universal inspector component that automatically selects appropriate inspector type
96
 * Note: Components use FC<any> - prop contracts defined via PropTypes comments in source
97
 * @param props - Inspector props object
98
 * @returns React element with appropriate inspector
99
 */
100
function Inspector(props: {
101
  /** Data to inspect - any JavaScript value */
102
  data: any;
103
  /** When true, uses TableInspector instead of ObjectInspector */
104
  table?: boolean;
105
  /** Theme configuration - string preset or custom theme object */
106
  theme?: string | object;
107
  /** Optional root node name */
108
  name?: string;
109
  /** Initial expansion level for ObjectInspector */
110
  expandLevel?: number;
111
  /** Paths to expand on initialization */
112
  expandPaths?: string | string[];
113
  /** Show non-enumerable properties */
114
  showNonenumerable?: boolean;
115
  /** Sort object keys */
116
  sortObjectKeys?: boolean | ((a: string, b: string) => number);
117
  /** Custom node renderer function */
118
  nodeRenderer?: (props: any) => React.ReactElement;
119
  /** Column names for TableInspector */
120
  columns?: string[];
121
}): React.ReactElement;
122
```
123

124
[Universal Inspector](./universal-inspector.md)
125

126
### Object Inspector
127

128
Tree-view inspector for JavaScript objects, similar to console.log output. Displays objects in an expandable hierarchical structure with support for all JavaScript data types.
129

130
```typescript { .api }
131
/**
132
 * Tree-view inspector for JavaScript objects (like console.log)
133
 * Note: Uses FC<any> - actual props defined via PropTypes comments in source
134
 * @param props - ObjectInspector props object
135
 * @returns React element displaying object tree
136
 */
137
function ObjectInspector(props: {
138
  /** The JavaScript object to inspect */
139
  data?: any;
140
  /** Optional root node name */
141
  name?: string;
142
  /** Initial expansion level (depth) */
143
  expandLevel?: number;
144
  /** Paths to expand on initialization */
145
  expandPaths?: string | string[];
146
  /** Show non-enumerable properties */
147
  showNonenumerable?: boolean;
148
  /** Sort object keys alphabetically or with custom function */
149
  sortObjectKeys?: boolean | ((a: string, b: string) => number);
150
  /** Custom node renderer function */
151
  nodeRenderer?: (props: any) => React.ReactElement;
152
  /** Theme configuration */
153
  theme?: string | object;
154
}): React.ReactElement;
155
```
156

157
[Object Inspector](./object-inspector.md)
158

159
### Table Inspector
160

161
Tabular inspector for arrays and objects, similar to console.table. Displays data in a sortable table format with column selection support.
162

163
```typescript { .api }
164
/**
165
 * Tabular inspector for arrays and objects (like console.table)
166
 * Note: Uses FC<any> - actual props defined via PropTypes comments in source
167
 * @param props - TableInspector props object
168
 * @returns React element displaying data table
169
 */
170
function TableInspector(props: {
171
  /** Array or object to display in table format */
172
  data: any[] | object;
173
  /** Array of column names to display */
174
  columns?: string[];
175
  /** Theme configuration */
176
  theme?: string | object;
177
}): React.ReactElement;
178
```
179

180
[Table Inspector](./table-inspector.md)
181

182
### DOM Inspector
183

184
Specialized inspector for DOM nodes, displaying the DOM tree structure with proper HTML element representation. **Note: DOMInspector is not directly exported - it is used internally by the Inspector component when DOM nodes are detected.**
185

186
```typescript { .api }
187
// DOMInspector is used internally by Inspector component
188
// Access via: <Inspector data={domNode} />
189
```
190

191
[DOM Inspector](./dom-inspector.md)
192

193
### Utility Components
194

195
Low-level components for building custom inspector interfaces and node renderers.
196

197
```typescript { .api }
198
/**
199
 * Utility components for building custom inspector interfaces
200
 * Note: All components use FC<any> - actual props defined via PropTypes comments in source
201
 */
202
function ObjectLabel(props: {
203
  name: string | any;
204
  data: any;
205
  isNonenumerable?: boolean;
206
}): React.ReactElement;
207

208
function ObjectRootLabel(props: {
209
  name?: string;
210
  data: any;
211
}): React.ReactElement;
212

213
function ObjectPreview(props: {
214
  data: any;
215
}): React.ReactElement;
216

217
function ObjectValue(props: {
218
  object: any;
219
  styles?: React.CSSProperties;
220
}): React.ReactElement;
221

222
function ObjectName(props: {
223
  name: string;
224
  dimmed?: boolean;
225
  styles?: React.CSSProperties;
226
}): React.ReactElement;
227
```
228

229
[Utility Components](./utility-components.md)
230

231
### Themes
232

233
Pre-built themes and theming system for customizing the appearance of inspectors.
234

235
```typescript { .api }
236
const chromeLight: ThemeObject;
237
const chromeDark: ThemeObject;
238

239
interface ThemeObject {
240
  BASE_FONT_FAMILY?: string;
241
  BASE_FONT_SIZE?: string;
242
  BASE_LINE_HEIGHT?: number;
243
  BASE_BACKGROUND_COLOR?: string;
244
  BASE_COLOR?: string;
245
  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES?: number;
246
  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES?: number;
247
  OBJECT_NAME_COLOR?: string;
248
  OBJECT_VALUE_NULL_COLOR?: string;
249
  OBJECT_VALUE_UNDEFINED_COLOR?: string;
250
  OBJECT_VALUE_REGEXP_COLOR?: string;
251
  OBJECT_VALUE_STRING_COLOR?: string;
252
  OBJECT_VALUE_SYMBOL_COLOR?: string;
253
  OBJECT_VALUE_NUMBER_COLOR?: string;
254
  OBJECT_VALUE_BOOLEAN_COLOR?: string;
255
  OBJECT_VALUE_FUNCTION_PREFIX_COLOR?: string;
256
  OBJECT_VALUE_FUNCTION_NAME_COLOR?: string;
257
  HTML_TAG_COLOR?: string;
258
  HTML_TAGNAME_COLOR?: string;
259
  HTML_TAGNAME_TEXT_TRANSFORM?: string;
260
  HTML_ATTRIBUTE_NAME_COLOR?: string;
261
  HTML_ATTRIBUTE_VALUE_COLOR?: string;
262
  HTML_COMMENT_COLOR?: string;
263
  HTML_DOCTYPE_COLOR?: string;
264
  ARROW_COLOR?: string;
265
  ARROW_MARGIN_RIGHT?: number;
266
  ARROW_FONT_SIZE?: number;
267
  ARROW_ANIMATION_DURATION?: string;
268
  TREENODE_FONT_FAMILY?: string;
269
  TREENODE_FONT_SIZE?: string;
270
  TREENODE_LINE_HEIGHT?: number;
271
  TREENODE_PADDING_LEFT?: number;
272
  TABLE_BORDER_COLOR?: string;
273
  TABLE_TH_BACKGROUND_COLOR?: string;
274
  TABLE_TH_HOVER_COLOR?: string;
275
  TABLE_SORT_ICON_COLOR?: string;
276
  TABLE_DATA_BACKGROUND_IMAGE?: string;
277
  TABLE_DATA_BACKGROUND_SIZE?: string;
278
}
279
```
280

281
[Themes](./themes.md)
282

283
## Types
284

285
```typescript { .api }
286
/**
287
 * Node renderer function signature (not formally defined in source)
288
 * Based on actual usage patterns in the codebase
289
 */
290
type NodeRenderer = (props: {
291
  /** Current depth in the tree */
292
  depth: number;
293
  /** Property name or array index */
294
  name: string | number;
295
  /** The data value at this node */
296
  data: any;
297
  /** Whether this property is non-enumerable */
298
  isNonenumerable?: boolean;
299
  /** Whether this node is expanded */
300
  expanded?: boolean;
301
}) => React.ReactElement;
302
```