# use-vega

> Simple react hook for consuming vega/vega-lite specs

Latest version **0.4.0** (published 2020-11-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-vega
pnpm add use-vega
yarn add use-vega
bun add use-vega
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2020-11-07 |
| First published | 2020-11-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 0 |
| Unpacked size | 66.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Beni Ben Zikry |
| Maintainers | bbenzikry |
| Keywords | react, vega, vega-lite, charts |

## Links

- npm: https://www.npmjs.com/package/use-vega
- Repository: https://github.com/bbenzikry/use-vega
- npm.io page: https://npm.io/package/use-vega

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2020-11-07
- 0.3.0 — 2020-11-07
- 0.2.0 — 2020-11-07

## README

<img width='350px' src="https://user-images.githubusercontent.com/1993348/98430757-6fff3680-20b8-11eb-9b31-617f6d27b1fa.png">
<h1 align="center">useVega ⚛</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-0.3.0-blue.svg?cacheSeconds=2592000" />
  <a href="#" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  </a>
  <a href="https://twitter.com/bbenzikry" target="_blank">
    <img alt="Twitter: bbenzikry" src="https://img.shields.io/twitter/follow/bbenzikry.svg?style=social" />
  </a>
</p>

> Simple react hook for rendering Vega/Vega lite specifications

### ✨ [Demo](https://bbenzikry.github.io/use-vega)

## Prerequisites

use-vega requires [vega](https://www.npmjs.com/package/vega) and [vega-lite](https://www.npmjs.com/package/vega-lite)

## Install

```sh
yarn add --production use-vega
# OR
npm install use-vega
```

## Usage

```tsx
import {useVega} from 'use-vega'
const spec = /* some vega / vega lite spec here*/;
const SomeChart = () => {
const { ref, noData, isLoading, error } = useVega(spec)
return (
  <>
    <div ref={ref} />
    {noData && <>{'no data'}</>}
    {isLoading && <>{'loading'}</>}
    {error && <>{'error'}</>}
  </>
  )
}
```

## Notes and FAQ

The implementation is less performant than the one in [react-vega](https://github.com/vega/react-vega) as we recreate the view on change instead of doing a more in-depth comparison / update changesets.  
This will change in a future version dependent on traction.  
Feel free to PR if this bothers you 😁

## Show your support

Give a ⭐️ if this project helped you!

---
_Source: https://npm.io/package/use-vega · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._