How to render Vega visualizations in React

I recently discovered the Vega project, which is a JSON specification for describing interactive data visualizations. I stumbled into this project as I was learning d3.js for an economics graph authoring tool that I'm developing, and now I'm thinking I will just use this instead of d3. We'll see how that pans out, as I'm new to data visualization.

I haven't dug deep into this format yet, but I'm hoping it will be a flexible way to represent these configurable graphs I'm creating.

Well, so I didn't do any work here. I've just stripped vega-editor's graph renderer of some unneeded stuff and put it in my new react app, and everything just worked.

The component takes two parameters, the vega graph (a JSON object), and a renderer option ('canvas' or 'svg').

 import React from 'react';
 import PropTypes from 'prop-types';
 import * as vega from 'vega';

  * Based on renderer.js from vega-editor.                                                                                                                                                                      
 export default class VegaRenderer extends React.Component {
     static propTypes = {
         vegaSpec: PropTypes.object,
         renderer: PropTypes.string

     renderVega(props) { =
             this.chart.getBoundingClientRect().width + 'px';
         let runtime;
         let view;
         try {
             runtime = vega.parse(props.vegaSpec);
             view = new vega.View(runtime)

         } catch (err) {
             throw err;
         } = 'auto';

     componentDidMount() {

     componentDidUpdate() {

     renderChart() {
         return (
             <div className='chart-container'>                                                                                                                                                                  
                 <div className='chart'>                                                                                                                                                                        
                     <div ref={(c) => { this.chart = c; }}>                                                                                                                                                     

     render() {
         return (