Giới thiệu react‑obj‑view: Component React xem cấu trúc dữ liệu sâu hiệu suất cao

Khi phát triển ứng dụng React, bạn thường cần kiểm tra các cấu trúc JS lồng nhau — có thể là state, phản hồi API hoặc dữ liệu trong công cụ debug. Đó là lý do tôi tạo ra react‑obj‑view, một component React viết bằng TypeScript, cung cấp UI “obj inspector” với hiệu suất cao sẵn có.

✨ Chức năng chính

react‑obj‑view cho phép bạn render bất kỳ giá trị nào (object, array, promise, map, set, error…) theo dạng cây trong React. Các tính năng chính:

• Cây được ảo hóa: chỉ render các dòng đang hiển thị nên vẫn mượt kể cả với > 100 000 mục.
• Hỗ trợ resolver tích hợp: promise, map, set, error, date, regex, iterable, vòng tham chiếu.
• Xem trước (‘preview’) dòng gọn: khi node bị đóng lại vẫn hiện tóm tắt để quét nhanh.
• Tô nổi cập nhật: tùy chọn flash khi giá trị thay đổi giúp debug rõ hơn.
• Theming & styling: ghi đè CSS variables, thêm className hoặc dùng theme có sẵn.

🤔 Tại sao chọn thư viện này?

Có một số thư viện inspector khác (ví dụ: react‑json‑view) nhưng thường có điểm yếu: render toàn bộ cây (chậm nếu dữ liệu lớn), chỉ hỗ trợ JSON thuần túy, ít tùy biến hoặc thiếu ảo hóa.
react‑obj‑view cung cấp:

• Hiệu suất tốt với dữ liệu lớn
• Hỗ trợ nhiều kiểu dữ liệu JS/TS
• Dễ tùy biến và tích hợp trong hệ thiết kế của bạn
• Hỗ trợ TypeScript với React hiện đại (React 19.x)

⚡ Hướng dẫn nhanh

npm install react-obj-view
# hoặc
yarn add react-obj-view

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}
    />
  );
}

⚙️ Các props chính & cấu hình

🎨 Theming

Sử dụng theme có sẵn rất đơn giản:

import { themeMonokai } from "react-obj-view";

<ObjectView
  valueGetter={getter}
  style={themeMonokai}
/>

Trường hợp sử dụng & đối tượng người dùng

Thư viện này phù hợp với:

• Devs cần kiểm tra cây state lớn (Redux, Zustand, MobX)
• Công cụ debug trong dashboard nội bộ
• Giao diện logging hoặc debug trong production (vẫn cần hiệu suất)
• Trình khám phá dữ liệu trong admin UI

Lộ trình & đóng góp

Sắp tới sẽ thêm:

• Hook resolver cho các class/custom type
• Cải thiện accessibility (navigation bằng bàn phím)
• Tối ưu kích thước bundle
• Thêm theme và preset style

Rất hoan nghênh các đóng góp, issue và PR. Mã nguồn mở theo MIT license.

Nếu bạn cần một object‑inspector hiệu suất cao, linh hoạt cho React và hỗ trợ chuẩn TS/JS hiện đại — hãy thử react‑obj‑view.