wehub-resource-sync
58 lines
1.4 KiB
Markdown
58 lines
1.4 KiB
Markdown
# 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](./importing.md).
|
|
|
|
## `PerspectiveViewer`
|
|
|
|
A simple example using the `PerspectiveViewer` component:
|
|
|
|
```typescript
|
|
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`:
|
|
|
|
```typescript
|
|
import { PerspectiveWorkspace } from "@perspective-dev/react";
|
|
|
|
const WORKSPACE_CONFIG = // ...
|
|
|
|
function Dashboard() {
|
|
return (
|
|
<PerspectiveWorkspace
|
|
client={perspective.worker()}
|
|
config={WORKSPACE_CONFIG} />
|
|
);
|
|
}
|
|
```
|