React

Installation

npm install inspect-value

Integration Pattern

React can’t pass complex objects via JSX attributes to custom elements. Use useRef + useEffect to set the .value property imperatively:

import 'inspect-value';
import { useRef, useEffect } from 'react';

function Inspector({ data }: { data: any }) {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    if (ref.current) {
      (ref.current as any).value = data;
    }
  }, [data]);

  return <inspect-value ref={ref} name="myData" theme="inspect" />;
}

Reusable hook

function useInspect<T>(value: T, props?: Record<string, unknown>) {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    (ref.current as any).value = value;
  }, [value]);

  useEffect(() => {
    if (!ref.current || !props) return;
    for (const [k, v] of Object.entries(props)) {
      (ref.current as any)[k] = v;
    }
  }, [props]);

  return ref;
}

Live Demos

All JavaScript Types

Every built-in JS type rendered with specialized formatting.

All Types

Strings, numbers, booleans, arrays, objects, Date, RegExp, URL, Map, Set, Error, TypedArray — all expanded.

Theme Switcher

Switch between 6 built-in themes. Each theme is applied by setting the theme property.

Themes

Click a theme button to switch. The inspector re-renders instantly.

Dynamic Updates

Mutate React state and watch the inspector react in real time. Values flash on update.

Dynamic Updates

Click the buttons to modify state. The inspector updates reactively via useEffect.

Panel Component

A fixed-position drawer for persistent state inspection.

Panel

Toggle the panel open and change its position. It renders as a fixed overlay.

TypeScript

The package includes JSX type declarations. Add the types to your project:

/// <reference types="inspect-value/dist/index" />

Or add to your tsconfig.json:

{
  "compilerOptions": {
    "types": ["inspect-value/dist/index"]
  }
}