https://github.com/bbenzikry/use-vega

Simple react hook for using vega(lite) specs
https://github.com/bbenzikry/use-vega

charts react react-hooks vega vega-lite visualization

Last synced: 18 days ago
JSON representation

Simple react hook for using vega(lite) specs

• Host: GitHub
• URL: https://github.com/bbenzikry/use-vega
• Owner: bbenzikry
• License: mit
• Created: 2020-02-22T17:14:14.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T16:03:32.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T09:25:20.464Z (about 1 month ago)
• Topics: charts, react, react-hooks, vega, vega-lite, visualization
• Language: TypeScript
• Homepage:
• Size: 4.55 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


useVega ⚛



  

  

    

  

  

    

  



> 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 (

  <>

    


    {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!