React bindings for Perspective.

This module exports PerspectiveViewer, a declarative React wrapper for the <perspective-viewer> Custom Element. The component manages the element's imperative lifecycle — load() and restore() in response to prop changes, delete() on unmount — and exposes the element's Custom Events as React-style callback props.

Perspective's WebAssembly engine and UI must be initialized (and at least one plugin package imported) before the first <PerspectiveViewer> renders:

import perspective from "@perspective-dev/client";
import perspective_viewer from "@perspective-dev/viewer";
import "@perspective-dev/viewer-datagrid";
import "@perspective-dev/viewer-charts";

import SERVER_WASM from "@perspective-dev/server/dist/wasm/perspective-server.wasm";
import CLIENT_WASM from "@perspective-dev/viewer/dist/wasm/perspective-viewer.wasm";

await Promise.all([
    perspective.init_server(fetch(SERVER_WASM)),
    perspective_viewer.init_client(fetch(CLIENT_WASM)),
]);
Copy

Then pass a Table (or Client, or a Promise of either) and an optional config:

import { PerspectiveViewer } from "@perspective-dev/react";

const WORKER = await perspective.worker();
const TABLE = WORKER.table(
    fetch("superstore.lz4.arrow").then((resp) => resp.arrayBuffer()),
    { name: "superstore" },
);

const App: React.FC = () => (
    <PerspectiveViewer
        client={TABLE}
        config={{ group_by: ["State"], plugin: "Y Bar" }}
    />
);
Copy

See Also

• react-example project from the Perspective GitHub repo, a complete bundler-configured application including a multi-panel workspace config.
• Perspective User Guide
• <perspective-viewer> API documentation