` element used for embedding. |
| **ref** | `React.Ref
` | — | Forwarded to the `` element used for embedding. |
### `useVegaEmbed(params)`
```ts
type UseVegaEmbedParams = {
ref: React.RefObject;
spec: VisualizationSpec | string;
options?: EmbedOptions;
onEmbed?: (r: Result) => void;
onError?: (e: unknown) => void;
};
const result: Result | null = useVegaEmbed(params);
```
Returns the current [`Result`](https://vega.github.io/vega-embed/interfaces/Result.html) (or `null` while loading).
## Important
Any 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.
## Recipes
See [storybook](https://vega.github.io/react-vega) for live examples.
### 1. Dynamic data
```tsx
const ref = React.useRef(null);
const embed = useVegaEmbed({ ref, spec, options: { mode: "vega-lite" } });
useEffect(() => {
embed?.view.data("values", data).runAsync();
}, [embed, data]);
```
### 2. Programmatically changing width & height
```tsx
const embed = useVegaEmbed({
ref,
spec,
});
const changeDimensions = (width: number, height: number) => {
embed?.view.width(width).height(height).runAsync();
};
```
### 3. Subscribe to signal events
```tsx
const embed = useVegaEmbed({
ref,
spec,
});
useEffect(() => {
const listener = (signal, data) => console.log(signal, data);
embed?.view.addSignalListener("signal", listener);
return () => {
embed?.view.removeSignalListener("signal", listener);
};
}, [embed]);
```
For 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).
## Contributing
1. `npm i`
2. `npm run dev` – run the storybook
3. `npm run test` – run the test suite.
---
_Source: https://npm.io/package/react-vega · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._