react-obj-view

react-obj-view is a high-performance React component designed to facilitate the inspection of deeply nested objects and arrays through advanced virtualization techniques. Capable of rendering over 100,000 nodes seamlessly without UI blocking, this library is especially useful for applications dealing with massive datasets, ensuring responsive and smooth user experiences.

Features

• Virtualized Tree View: Renders only visible rows to maintain smooth performance while handling large data structures.
• Async Rendering: Facilitates non-blocking tree traversal, which keeps the user interface responsive during extensive data processing.
• Robust Resolver System: Supports various data types, including promises, maps, sets, and custom classes, allowing for comprehensive data inspections.
• Sticky Path Headers: Keeps ancestor context visible while scrolling through nested data structures for easier navigation.
• Dynamic Grouping: Automatically groups large arrays and objects to enhance performance and organization, helping to manage extensive data payloads effectively.
• TypeScript Native: Fully supports TypeScript with a comprehensive API and includes .d.ts files for type safety.
• Zero Dependencies: Lightweight library that only relies on React for optimal performance.
• Custom Styling Hooks: Offers multiple CSS variables and theme presets for easy customization or theming.
• Interactive Features: Includes buttons for copying values or JSON-serialized data and highlights to indicate updated values, enhancing usability.
• Custom Tree APIs: Allows the building of user-defined tree views for any data structure.
• Line Number Option: Provides an optional gutter with line numbers for debugging purposes.

Quick Usage Example

To get started, import the ObjectView component and use it to visualize your object data:

import { ObjectView } from "react-obj-view";
import "react-obj-view/dist/react-obj-view.css";

const user = {
  name: "Ada",
  stack: ["TypeScript", "React"],
  meta: new Map([["lastLogin", new Date()]]),
};

export function DebugPanel() {
  return (
    <ObjectView
      valueGetter={() => user}
      name="user"
      expandLevel={2}
    />
  );
}

To ensure optimal performance, a stable getter function can be implemented:

const valueGetter = useCallback(() => user, [user]);
<ObjectView valueGetter={valueGetter} />;

Performance

Performance benchmarks indicate that react-obj-view can handle significant data volumes, processing 100k nodes in approximately 23.7 ms. The component is engineered to handle even 2M-node payloads smoothly, making it suitable for various applications like debugging panels, API explorers, and data-heavy dashboards.

For further details, including advanced usage patterns, custom resolver implementation, and styling guidance, refer to the Usage Guide and API Documentation.

Whether for developing sophisticated dashboards, building debug panels, or exploring complex data structures, react-obj-view offers robust features tailored for high-volume data visualization in React applications.