tessl/npm-react-inspector

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

—

Pending

Overview

Eval results

Files

Themes

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

Theming system for customizing the appearance of all inspector components. Provides pre-built Chrome DevTools themes and supports custom theme creation.

Capabilities

Pre-built Themes

Two preset themes matching Chrome DevTools appearance.

/**
 * Chrome DevTools light theme
 * Default theme with light background and dark text
 */
const chromeLight: ThemeObject;

/**
 * Chrome DevTools dark theme  
 * Dark background with light text for dark mode interfaces
 */
const chromeDark: ThemeObject;

Usage Examples:

import React from "react";
import { Inspector, chromeLight, chromeDark } from "react-inspector";

function ThemedInspectors() {
  const data = { name: "Alice", age: 30, hobbies: ["reading", "coding"] };
  
  return (
    <div>
      {/* Light theme (default) */}
      <Inspector data={data} theme="chromeLight" />
      
      {/* Dark theme */}
      <Inspector data={data} theme="chromeDark" />
      
      {/* Using theme objects directly */}
      <Inspector data={data} theme={chromeLight} />
      <Inspector data={data} theme={chromeDark} />
    </div>
  );
}

Theme Object Structure

Complete theme interface with all customizable properties.

interface ThemeObject {
  // Base typography and layout
  /** Base font family for all text */
  BASE_FONT_FAMILY?: string;
  /** Base font size */
  BASE_FONT_SIZE?: string;
  /** Base line height */
  BASE_LINE_HEIGHT?: number;
  /** Background color for inspector containers */
  BASE_BACKGROUND_COLOR?: string;
  /** Default text color */
  BASE_COLOR?: string;
  
  // Object preview settings
  /** Max properties shown in array previews */
  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES?: number;
  /** Max properties shown in object previews */
  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES?: number;
  
  // Object and property styling
  /** Color for property names */
  OBJECT_NAME_COLOR?: string;
  /** Color for null values */
  OBJECT_VALUE_NULL_COLOR?: string;
  /** Color for undefined values */
  OBJECT_VALUE_UNDEFINED_COLOR?: string;
  /** Color for regular expressions */
  OBJECT_VALUE_REGEXP_COLOR?: string;
  /** Color for string values */
  OBJECT_VALUE_STRING_COLOR?: string;
  /** Color for symbol values */
  OBJECT_VALUE_SYMBOL_COLOR?: string;
  /** Color for number values */
  OBJECT_VALUE_NUMBER_COLOR?: string;
  /** Color for boolean values */
  OBJECT_VALUE_BOOLEAN_COLOR?: string;
  /** Color for function prefix (ƒ symbol) */
  OBJECT_VALUE_FUNCTION_PREFIX_COLOR?: string;
  
  // HTML/DOM element styling
  /** Color for HTML tag brackets < > */
  HTML_TAG_COLOR?: string;
  /** Color for HTML tag names (div, span, etc.) */
  HTML_TAGNAME_COLOR?: string;
  /** Text transform for tag names (uppercase, lowercase, none) */
  HTML_TAGNAME_TEXT_TRANSFORM?: string;
  /** Color for HTML attribute names */
  HTML_ATTRIBUTE_NAME_COLOR?: string;
  /** Color for HTML attribute values */
  HTML_ATTRIBUTE_VALUE_COLOR?: string;
  /** Color for HTML comments */
  HTML_COMMENT_COLOR?: string;
  /** Color for DOCTYPE declarations */
  HTML_DOCTYPE_COLOR?: string;
  
  // Tree view controls
  /** Color for expand/collapse arrows */
  ARROW_COLOR?: string;
  /** Right margin for arrows */
  ARROW_MARGIN_RIGHT?: number;
  /** Font size for arrows */
  ARROW_FONT_SIZE?: number;
  /** CSS animation duration for arrow animations */
  ARROW_ANIMATION_DURATION?: string;
  
  // Tree node styling
  /** Font family for tree nodes */
  TREENODE_FONT_FAMILY?: string;
  /** Font size for tree nodes */
  TREENODE_FONT_SIZE?: string;
  /** Line height for tree nodes */
  TREENODE_LINE_HEIGHT?: number;
  /** Left padding for tree indentation */
  TREENODE_PADDING_LEFT?: number;
  
  // Table styling
  /** Border color for table elements */
  TABLE_BORDER_COLOR?: string;
  /** Background color for table headers */
  TABLE_TH_BACKGROUND_COLOR?: string;
  /** Hover color for table headers */
  TABLE_TH_HOVER_COLOR?: string;
  /** Color for table sort icons */
  TABLE_SORT_ICON_COLOR?: string;
  /** Background image pattern for table data cells */
  TABLE_DATA_BACKGROUND_IMAGE?: string;
  /** Background size for table data cells */
  TABLE_DATA_BACKGROUND_SIZE?: string;
}

Custom Theme Creation

Create custom themes by providing a theme object with desired overrides.

Complete Custom Theme:

import React from "react";
import { Inspector, chromeLight } from "react-inspector";

const customTheme = {
  BASE_FONT_FAMILY: 'Monaco, "Lucida Console", monospace',
  BASE_FONT_SIZE: '12px',
  BASE_BACKGROUND_COLOR: '#f8f9fa',
  BASE_COLOR: '#212529',
  
  // Custom colors for different value types
  OBJECT_VALUE_STRING_COLOR: '#d63384',
  OBJECT_VALUE_NUMBER_COLOR: '#6f42c1',
  OBJECT_VALUE_BOOLEAN_COLOR: '#198754',
  OBJECT_VALUE_NULL_COLOR: '#6c757d',
  OBJECT_VALUE_UNDEFINED_COLOR: '#6c757d',
  
  // Custom tree styling
  TREENODE_PADDING_LEFT: 16,
  ARROW_COLOR: '#495057',
  
  // Custom table styling
  TABLE_BORDER_COLOR: '#dee2e6',
  TABLE_TH_BACKGROUND_COLOR: '#e9ecef',
  TABLE_TH_HOVER_COLOR: '#adb5bd'
};

function CustomThemeExample() {
  const data = {
    message: "Hello World",
    count: 42,
    isActive: true,
    items: null,
    config: undefined
  };
  
  return <Inspector data={data} theme={customTheme} />;
}

Extending Existing Themes:

import { chromeLight, chromeDark } from "react-inspector";

// Extend light theme with custom colors
const customLight = {
  ...chromeLight,
  OBJECT_VALUE_STRING_COLOR: '#e74c3c',
  OBJECT_VALUE_NUMBER_COLOR: '#3498db',
  TREENODE_PADDING_LEFT: 20
};

// Extend dark theme with custom font
const customDark = {
  ...chromeDark,
  BASE_FONT_FAMILY: 'Fira Code, monospace',
  BASE_FONT_SIZE: '13px'
};

Theme Application

Themes can be applied at different levels with inheritance.

Component-Level Theming:

// Apply theme to individual inspector
<Inspector data={data} theme="chromeDark" />
<ObjectInspector data={data} theme={customTheme} />
<TableInspector data={data} theme="chromeLight" />

Multiple Components with Same Theme:

function ThemedApp() {
  const theme = {
    ...chromeLight,
    BASE_FONT_SIZE: '14px',
    TREENODE_PADDING_LEFT: 18
  };
  
  return (
    <div>
      <h2>User Data</h2>
      <Inspector data={userData} theme={theme} />
      
      <h2>Configuration</h2>
      <Inspector data={configData} theme={theme} />
      
      <h2>Table View</h2>
      <Inspector data={tableData} table theme={theme} />
    </div>
  );
}

Chrome Light Theme Values

Default values for the light theme:

const chromeLight = {
  BASE_FONT_FAMILY: 'Menlo, monospace',
  BASE_FONT_SIZE: '11px',
  BASE_LINE_HEIGHT: 1.2,
  BASE_BACKGROUND_COLOR: 'white',
  BASE_COLOR: 'black',
  
  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
  
  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
  
  HTML_TAG_COLOR: 'rgb(168, 148, 166)',
  HTML_TAGNAME_COLOR: 'rgb(136, 18, 128)',
  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(153, 69, 0)',
  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(26, 26, 166)',
  HTML_COMMENT_COLOR: 'rgb(35, 110, 37)',
  
  ARROW_COLOR: '#6e6e6e',
  ARROW_MARGIN_RIGHT: 3,
  ARROW_FONT_SIZE: 12,
  ARROW_ANIMATION_DURATION: '0',
  
  TREENODE_FONT_FAMILY: 'Menlo, monospace',
  TREENODE_FONT_SIZE: '11px',
  TREENODE_LINE_HEIGHT: 1.2,
  TREENODE_PADDING_LEFT: 12,
  
  TABLE_BORDER_COLOR: '#aaa',
  TABLE_TH_BACKGROUND_COLOR: '#eee',
  TABLE_TH_HOVER_COLOR: 'hsla(0, 0%, 90%, 1)',
  TABLE_SORT_ICON_COLOR: '#6e6e6e'
};

Chrome Dark Theme Values

Key differences in the dark theme:

const chromeDark = {
  BASE_BACKGROUND_COLOR: 'rgb(36, 36, 36)',
  BASE_COLOR: 'rgb(213, 213, 213)',
  
  OBJECT_NAME_COLOR: 'rgb(227, 110, 236)',
  OBJECT_VALUE_STRING_COLOR: 'rgb(233, 63, 59)',
  OBJECT_VALUE_NUMBER_COLOR: 'rgb(102, 153, 255)',
  // ... other dark theme color adjustments
};

Theme Performance

Themes are applied through CSS-in-JS with minimal performance impact:

Static Themes: Pre-built themes are optimized objects
Custom Themes: Merged once per component instance
Style Caching: Styles are memoized within components
Inheritance: Only specified properties override defaults

Best Practices

Theme Consistency:

// Define app-wide theme constants
const APP_THEMES = {
  light: { ...chromeLight, BASE_FONT_SIZE: '12px' },
  dark: { ...chromeDark, BASE_FONT_SIZE: '12px' },
  compact: { ...chromeLight, TREENODE_PADDING_LEFT: 8 }
};

// Use consistent themes across app
<Inspector data={data} theme={APP_THEMES.light} />

Accessibility Considerations:

const accessibleTheme = {
  ...chromeLight,
  BASE_FONT_SIZE: '14px',           // Larger text
  BASE_LINE_HEIGHT: 1.4,           // Better line spacing
  OBJECT_VALUE_STRING_COLOR: '#c7254e',  // Higher contrast
  OBJECT_VALUE_NUMBER_COLOR: '#0066cc'    // Sufficient contrast ratio
};

Performance Optimization:

// Avoid creating theme objects in render
const STATIC_THEME = { ...chromeLight, BASE_FONT_SIZE: '13px' };

function OptimizedComponent() {
  return <Inspector data={data} theme={STATIC_THEME} />;
}

Install with Tessl CLI