Can I use Webpack to enter Google charts into my project?

Question

Is there a way to use Google Chart in a React app? I found react-google-charts that works a little for me, but it doesn't seem to have a lot of Google API maps or is in at least undocumented. I am also a little shy to use something in production that NPM statistics show only ~ 400 downloads in the last day.

However, I can not find Google Charts only in NPM and not just for import Charts from 'google-charts', as I originally expected.

My next thought was to see if there was a way to import the library as a global variable.

1) How can I do this 2) If possible, how to include it in a reactive component, for example import { Line } from '???'

Answer 1

Use Webpack externals
By defining the library as external, the web package just exports the global symbol for the library, which is very similar (for example, for jQuery)

{
    1: function(...) {
        // simplified for illustrating
        module.exports = jQuery;
    }
}

So you can do something similar to this:

• Add <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>or a new URL from the Charts Home Page

• In the configuration of your web package add:

  externals: {
    charts: 'google.charts'  // or any other alias you want, can be a regex too! check Webpack doc for more
  }
  

• And import it as:

  import chart from 'charts'
  // do something!
  charts.load('current', {'packages':['corechart']});
  

Before downloading the package, be sure to download Google Maps.

For the ReactJS part , you need to somehow get your own DOM element in the script, using refsor something like that.

P.S. , , , -, ,