react-vega is a lightweight React component library that wraps vega-embed, enabling the declarative integration of Vega and Vega-Lite visualizations within React applications. Its current stable version is 8.0.0, released in 2024. While specific release cadence isn't explicitly stated, the project maintains an active development presence, aligning with the broader Vega ecosystem's evolution. Key differentiators include providing both a `<VegaEmbed />` component for direct JSX usage and a `useVegaEmbed` hook for more imperative control and access to the Vega View API, facilitating dynamic data updates and event subscriptions without full re-renders. It ships with TypeScript types, offering a robust development experience. Unlike directly using `vega-embed`, `react-vega` handles the React lifecycle integration, ensuring proper mounting, unmounting, and updates of the visualization container.
npm install react-vegaVerified import paths — ran on the pinned version, not inferred.
This example demonstrates embedding a static Vega-Lite bar chart using the `VegaEmbed` component.
Migrate to using the `useVegaEmbed` hook to access the Vega View API and update data using `view.data('source_name').insert/remove/change()`. Refer to the 'Dynamic data' recipe in the documentation.Utilize the `useVegaEmbed` hook to obtain the Vega View API and call `view.resize()` or `view.width()/height()` directly. See the 'Programmatically changing width & height' recipe.
With the `useVegaEmbed` hook, get the `view` object from the result and use `view.addSignalListener('signalName', handlerFunction)` to subscribe to signals. Check the 'Subscribe to signal events' recipe.Consolidate all `vega-embed` specific options into a single object and pass it to the `options` prop: `<VegaEmbed spec={mySpec} options={{ actions: false, renderer: 'svg' }} />`.For dynamic updates to data, dimensions, or signal listeners that should preserve interaction state, use the Vega View API obtained via the `useVegaEmbed` hook. Only change `spec` or `options` when a complete re-initialization of the visualization is desired.
Data in Vega/Vega-Lite is updated via the View API. Use the `useVegaEmbed` hook to get the `view` object and call `view.data('source_name').change(...)`.Conditionally render or access `result.view` only when `result` is not `null`. The `useVegaEmbed` hook returns `null` initially and then the `Result` object once `vega-embed` resolves.
Ensure `react-vega`, `vega-embed`, `vega-lite` (and optionally `vega`) are installed via `npm i react-vega vega-embed vega-lite` (and `npm i vega`), and `react` types are present if using TypeScript (`npm i -D @types/react @types/react-dom`). Verify `tsconfig.json` includes `"jsx": "react"` or `"react-jsx"`.