A React wrapper for vega-embed
react-vegaA lightweight React wrapper around vega-embed
``bash`
npm i react-vega vega-embed vega-lite
If you need to use Vega (not Vega-Lite), you will also need to install .
`bash`
npm i vegaMigrating to v8
In v8, the data prop was removed. Additionally, you can no longer update data by changing spec.data without the view being re-embedded. Instead use the View API to update data. See the Dynamic data recipe for an example.
The height and width props were removed. Additionally, you can no longer resize the view by changing spec.width or spec.height without the view being re-embedded. Instead use the View API to resize the view. See the Programmatically changing width & height recipe for an example.
The signalListeners prop was removed. Instead use the View API to subscribe to signal events. See the Subscribe to signal events recipe for an example.
Vega embed options are passed directly via the options prop, they are no longer flattened props on the VegaEmbed component.
`tsx
import { VegaEmbed } from "react-vega";
function Component() {
return
}
`
or
`tsx
import { useVegaEmbed } from "react-vega";
function Component() {
const ref = React.useRef
const result = useVegaEmbed({ ref, spec, options });
return ;
}
`
| Prop | Type | Default | Notes | const result: Result | null = useVegaEmbed(params); See storybook for live examples. useEffect(() => { const changeDimensions = (width: number, height: number) => { useEffect(() => { embed?.view.addSignalListener("signal", listener); return () => { For more information see the documentation for vega-embed and the vega View API. 1.
| --------------------- | -------------------------------------- | ------- | --------------------------------------------------------- |
| spec (required) | VisualizationSpec \| string | — | Inline spec or URL. Accepts both Vega & Vega-Lite. |options
| | EmbedOptions | {} | Passed directly to embed(). |onEmbed
| | (result: Result) => void | — | Called once embed() resolves. See Result for details. |onError
| | (err: unknown) => void | — | Called if embed() rejects. |...divProps
| | React.HTMLAttributes | — | Forwarded to the element used for embedding. |React.Ref
| ref | | — | Forwarded to the element used for embedding. |`$3
ts`
type UseVegaEmbedParams = {
ref: React.RefObject
spec: VisualizationSpec | string;
options?: EmbedOptions;
onEmbed?: (r: Result) => void;
onError?: (e: unknown) => void;
};Result (or null while loading).specImportant
Any changes to or options will cause the view to be torn down and re-embedded. If you need to update the view without re-embedding, use the View API. Refer to the Recipes section for common use cases.`Recipes
$3
tsx`
const ref = React.useRef
const embed = useVegaEmbed({ ref, spec, options: { mode: "vega-lite" } });
embed?.view.data("values", data).runAsync();
}, [embed, data]);$3
tsx`
const embed = useVegaEmbed({
ref,
spec,
});
embed?.view.width(width).height(height).runAsync();
};$3
tsx`
const embed = useVegaEmbed({
ref,
spec,
});
const listener = (signal, data) => console.log(signal, data);
embed?.view.removeSignalListener("signal", listener);
};
}, [embed]);Contributing
2. – run the storybooknpm run test` – run the test suite.
3.