tessl/npm-react-inspector

Browser DevTools-style inspectors for React applications to display JavaScript objects, tables, and DOM nodes.

—

Pending

Overview

Eval results

Files

Object Inspector

Name: tessl/npm-react-inspector
Author: tessl

Tree-view inspector for JavaScript objects that displays data in an expandable hierarchical structure, similar to console.log output. Supports all JavaScript data types including objects, arrays, functions, primitives, and special values.

Capabilities

ObjectInspector Component

Main component for inspecting JavaScript objects in a tree structure with expandable nodes.

/**
 * Tree-view inspector for JavaScript objects
 * @param props - ObjectInspector configuration props
 * @returns React element displaying the object tree
 */
function ObjectInspector(props: ObjectInspectorProps): React.ReactElement;

interface ObjectInspectorProps {
  /** The JavaScript object to inspect - supports any data type */
  data: any;
  /** Optional name for the root node - displays as "name: ObjectPreview" */
  name?: string;
  /** Initial expansion level - 0 means collapsed, 1 expands first level, etc. */
  expandLevel?: number;
  /** 
   * Paths to expand on initialization - JSONPath-style strings or array
   * Examples: "$", "$.foo", "$.foo.bar", ["$", "$.foo", "$.foo.bar"]
   * Supports wildcards: "$.*" expands all first-level properties
   */
  expandPaths?: string | string[];
  /** Show non-enumerable properties (dimmed) - default false */
  showNonenumerable?: boolean;
  /** 
   * Sort object keys - true for alphabetical, function for custom sorting
   * Does not affect array indices
   */
  sortObjectKeys?: boolean | ((a: string, b: string) => number);
  /** 
   * Custom node renderer function - receives depth, name, data, isNonenumerable
   * Default renders ObjectRootLabel for depth 0, ObjectLabel for others
   */
  nodeRenderer?: (props: NodeRendererProps) => React.ReactElement;
  /** Theme configuration - preset string or custom theme object */
  theme?: string | ThemeObject;
}

Usage Examples:

import React from "react";
import { ObjectInspector } from "react-inspector";

// Basic object inspection
const data = {
  name: "Alice",
  age: 30,
  hobbies: ["reading", "coding"],
  address: { city: "New York", zip: "10001" }
};

function BasicExample() {
  return <ObjectInspector data={data} />;
}

// Expanded object with custom root name
function ExpandedExample() {
  return (
    <ObjectInspector 
      data={data} 
      name="user"
      expandLevel={2}
    />
  );
}

// Show non-enumerable properties and sort keys
function AdvancedExample() {
  return (
    <ObjectInspector 
      data={data}
      showNonenumerable={true}
      sortObjectKeys={true}
    />
  );
}

// Custom expansion paths
function CustomExpansionExample() {
  return (
    <ObjectInspector 
      data={data}
      expandPaths={["$", "$.address"]}
    />
  );
}

Node Renderer Customization

Custom node renderers allow complete control over how tree nodes are displayed.

interface NodeRendererProps {
  /** Current depth in the tree (0 = root) */
  depth: number;
  /** Property name, array index, or special keys like "__proto__" */
  name: string | number;
  /** The data value at this node */
  data: any;
  /** Whether this property is non-enumerable (affects styling) */
  isNonenumerable?: boolean;
  /** Whether this node is currently expanded */
  expanded?: boolean;
}

/**
 * Default node renderer used by ObjectInspector
 * @param props - Node rendering properties
 * @returns React element for the tree node
 */
function defaultNodeRenderer(props: NodeRendererProps): React.ReactElement;

Custom Node Renderer Example:

import React from "react";
import { 
  ObjectInspector, 
  ObjectRootLabel, 
  ObjectLabel,
  ObjectName,
  ObjectValue 
} from "react-inspector";

function customNodeRenderer({ depth, name, data, isNonenumerable }) {
  if (depth === 0) {
    return <ObjectRootLabel name={name} data={data} />;
  }
  
  // Custom styling for functions
  if (typeof data === 'function') {
    return (
      <span style={{ color: 'purple' }}>
        <ObjectName name={name} dimmed={isNonenumerable} />
        <span>: </span>
        <ObjectValue object={data} />
        <span> 🚀</span>
      </span>
    );
  }
  
  return <ObjectLabel name={name} data={data} isNonenumerable={isNonenumerable} />;
}

function CustomRendererExample() {
  return (
    <ObjectInspector 
      data={{ fn: () => "hello", value: 42 }}
      nodeRenderer={customNodeRenderer}
    />
  );
}

Expansion Path Syntax

ObjectInspector supports JSONPath-style expansion paths for controlling which nodes are initially expanded.

Path Examples:

"$" - Expand root node
"$.foo" - Expand the "foo" property
"$.foo.bar" - Expand the "bar" property within "foo"
"$.1" - Expand array index 1
"$.*" - Expand all first-level properties (wildcard)
["$", "$.foo", "$.foo.bar"] - Expand multiple specific paths

Important Notes:

Paths are merged with expandLevel - both are applied
To expand a nested path completely, include all parent paths
Wildcards only work for one level at a time

// Expand specific nested paths
<ObjectInspector 
  data={complexData}
  expandPaths={[
    "$",              // Root
    "$.users",        // Users array
    "$.users.0",      // First user
    "$.config.*"      // All config properties
  ]}
/>

Object Key Sorting

Control how object properties are ordered in the tree display.

// Boolean sorting - alphabetical order (excludes arrays)
sortObjectKeys: true

// Custom sorting function
sortObjectKeys: (a: string, b: string) => number

// Examples:
// Reverse alphabetical
sortObjectKeys: (a, b) => b.localeCompare(a)

// Length-based sorting
sortObjectKeys: (a, b) => a.length - b.length

// Case-insensitive
sortObjectKeys: (a, b) => a.toLowerCase().localeCompare(b.toLowerCase())