{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-vega"],"cli":null},"imports":["import { VegaEmbed } from 'react-vega';","import { useVegaEmbed } from 'react-vega';","import type { VisualizationSpec } from 'react-vega';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}