Using components that require a loaded script using react-load-script

component.jsx

import React from 'react';
import Loader from './loader';

const drawChart = (data, div) => {
	// omitted
	// Can use the loaded script safely
}

export default ({data}) => (
	<Loader>
		<div ref={ref => drawChart(data, ref)} />
	</Loader>
)
  

loader.jsx

import React from 'react';
import Script from 'react-load-script';

export default class extends React.Component {
	constructor(props) {
		super(props);

		this.state = { loading: true, error: false, loaded: false };
	}

	render() {
		return (
			<>
				<Script
					url="https://www.gstatic.com/charts/loader.js"
					onError={() =>
						this.setState({ loading: false, error: true })
					}
					onLoad={async () => {
						try {
							await google.charts.load('current', {
								packages: ['corechart'],
							});
							this.setState({ loading: false, loaded: true });
						} catch (e) {
							this.setState({ loading: false, error: true })
						}
					}}
				/>
				{this.state.loading && 'Loading chart...'}
				{this.state.error && 'An error occured while loading the chart'}
				{this.state.loaded && this.props.children}
			</>
		);
	}
}