` element used for embedding. |\n| **ref** | `React.Ref
` | — | Forwarded to the `` element used for embedding. |\n\n### `useVegaEmbed(params)`\n\n```ts\ntype UseVegaEmbedParams = {\n ref: React.RefObject;\n spec: VisualizationSpec | string;\n options?: EmbedOptions;\n onEmbed?: (r: Result) => void;\n onError?: (e: unknown) => void;\n};\n\nconst result: Result | null = useVegaEmbed(params);\n```\n\nReturns the current [`Result`](https://vega.github.io/vega-embed/interfaces/Result.html) (or `null` while loading).\n\n## Important\nAny changes to `spec` 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](https://vega.github.io/vega/docs/api/view). Refer to the [Recipes](#recipes) section for common use cases.\n\n## Recipes\n\nSee [storybook](https://vega.github.io/react-vega) for live examples.\n\n### 1. Dynamic data\n\n```tsx\nconst ref = React.useRef(null);\nconst embed = useVegaEmbed({ ref, spec, options: { mode: \"vega-lite\" } });\n\nuseEffect(() => {\n embed?.view.data(\"values\", data).runAsync();\n}, [embed, data]);\n```\n\n### 2. Programmatically changing width & height\n\n```tsx\nconst embed = useVegaEmbed({\n ref,\n spec,\n});\n\nconst changeDimensions = (width: number, height: number) => {\n embed?.view.width(width).height(height).runAsync();\n};\n```\n### 3. Subscribe to signal events\n\n```tsx\nconst embed = useVegaEmbed({\n ref,\n spec,\n});\n\nuseEffect(() => {\n const listener = (signal, data) => console.log(signal, data);\n\n embed?.view.addSignalListener(\"signal\", listener);\n\n return () => {\n embed?.view.removeSignalListener(\"signal\", listener);\n };\n}, [embed]);\n\n```\n\nFor more information see the documentation for [vega-embed](https://vega.github.io/vega-embed/) and the [vega View API](https://vega.github.io/vega/docs/api/view).\n\n## Contributing\n\n1. `npm i`\n2. `npm run dev` – run the storybook\n3. `npm run test` – run the test suite.\n","readmeFilename":"README.md"}