useVega

Simple react hook for rendering Vega/Vega lite specifications

Demo

Prerequisites

use-vega requires vega and vega-lite

Install

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

Usage

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