{"id":11904,"library":"react-vega","title":"React Wrapper for Vega/Vega-Lite Visualizations","description":"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.","status":"active","version":"8.0.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/vega/react-vega","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-vega","lang":"bash","label":"npm"},{"cmd":"yarn add react-vega","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-vega","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any React application.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components.","package":"react-dom","optional":false},{"reason":"Core library wrapped by react-vega; handles the actual embedding logic.","package":"vega-embed","optional":false},{"reason":"Required for rendering Vega-Lite specifications.","package":"vega-lite","optional":false},{"reason":"Required for rendering raw Vega specifications (if not using Vega-Lite).","package":"vega","optional":true}],"imports":[{"note":"Primary component for embedding. CommonJS `require` is not officially supported and may lead to issues with modern build setups. The library primarily targets ESM.","wrong":"const VegaEmbed = require('react-vega').VegaEmbed;","symbol":"VegaEmbed","correct":"import { VegaEmbed } from 'react-vega';"},{"note":"React hook for more granular control over the Vega view, especially for dynamic updates. Like `VegaEmbed`, it's designed for ESM.","wrong":"const useVegaEmbed = require('react-vega').useVegaEmbed;","symbol":"useVegaEmbed","correct":"import { useVegaEmbed } from 'react-vega';"},{"note":"This is a TypeScript type import. Attempting to import it as a value will result in a runtime error or build failure in strict environments. It is re-exported from `vega-embed`.","wrong":"import { VisualizationSpec } from 'react-vega';","symbol":"VisualizationSpec","correct":"import type { VisualizationSpec } from 'react-vega';"}],"quickstart":{"code":"import React from 'react';\nimport { VegaEmbed } from 'react-vega';\n\nconst spec = {\n  $schema: 'https://vega.github.io/schema/vega-lite/v5.json',\n  description: 'A simple bar chart with embedded data.',\n  data: { values: [\n    {a: 'A', b: 28},\n    {a: 'B', b: 55},\n    {a: 'C', b: 43},\n    {a: 'D', b: 91},\n    {a: 'E', b: 81},\n    {a: 'F', b: 53},\n    {a: 'G', b: 19},\n    {a: 'H', b: 87},\n    {a: 'I', b: 12}\n  ]},\n  mark: 'bar',\n  encoding: {\n    x: {field: 'a', type: 'nominal', axis: {labelAngle: 0}},\n    y: {field: 'b', type: 'quantitative'}\n  }\n};\n\nconst options = {\n  actions: false // Disable default actions like 'Export as SVG/PNG'\n};\n\nfunction MyVegaChart() {\n  return (\n    <div>\n      <h1>My Interactive Chart</h1>\n      <VegaEmbed spec={spec} options={options} />\n    </div>\n  );\n}\n\nexport default MyVegaChart;\n","lang":"typescript","description":"This example demonstrates embedding a static Vega-Lite bar chart using the `VegaEmbed` component."},"warnings":[{"fix":"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.","message":"The `data` prop was removed in v8.0.0. Direct data updates via `spec.data` will no longer re-render the view without re-embedding. Use the Vega View API for dynamic data updates.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"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.","message":"The `height` and `width` props were removed in v8.0.0. Changing `spec.width` or `spec.height` will not resize the view without re-embedding. Use the Vega View API for programmatic resizing.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"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.","message":"The `signalListeners` prop was removed in v8.0.0. Subscribing to signal events must now be done via the Vega View API.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"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' }} />`.","message":"Vega embed `options` are no longer flattened as direct props on the `<VegaEmbed />` component since v8.0.0. They must now be passed as a single object to the `options` prop.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"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.","message":"Any changes to the `spec` or `options` props of `<VegaEmbed />` (or `useVegaEmbed` params) will cause the entire Vega view to be torn down and re-embedded, leading to a full re-render and loss of interactive state.","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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(...)`.","cause":"Attempting to update data directly on the `spec` object passed to `VegaEmbed` or `useVegaEmbed` after initial render.","error":"Error: \"spec.data\" is not a function"},{"fix":"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.","cause":"Attempting to access the `view` property from the `useVegaEmbed` result before the embedding process is complete, when `result` is still `null`.","error":"TypeError: Cannot read properties of null (reading 'view')"},{"fix":"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\"`.","cause":"The `react-vega` package is not installed, or TypeScript cannot locate its declaration files (e.g., missing `@types/react` or misconfigured `tsconfig.json`).","error":"TS2307: Cannot find module 'react-vega' or its corresponding type declarations."}],"ecosystem":"npm"}