React Component

We provide a React wrapper to prevent common issues and mistakes associated with using the perspective-viewer web component in the context of React.

Before trying this example, please take a look at how to bootstrap perspective.

PerspectiveViewer

A simple example using the PerspectiveViewer component:

import React, { useCallback, useEffect, useRef } from "react";
import {
 PerspectiveViewer,
} from "@perspective-dev/react";
import perspective from "@perspective-dev/client";
function App() {
 const worker = useRef(null);
 useEffect(() => {
 (async () => {
 worker.current = await perspective.worker();
 const resp = await fetch("data.arrow");
 const arrow = await resp.arrayBuffer();
 await worker.current.table(arrow, { name: "my_table" });
 })();
 }, []);
 return (
 <PerspectiveViewer
 client={worker.current}
 config={{group_by: ["State"], columns: ["Sales"]}}
 />
 );
}

PerspectiveWorkspace

For multi-viewer layouts, use PerspectiveWorkspace:

import { PerspectiveWorkspace } from "@perspective-dev/react";
const WORKSPACE_CONFIG = // ...
function Dashboard() {
 return (
 <PerspectiveWorkspace
 client={perspective.worker()}
 config={WORKSPACE_CONFIG} />
 );
}