The 3 scripts in here are separated for clarity. They are:
ScriptCache.js
- The backbone of this method which asynchronously loads JavaScript<script>
tags on a page. It will only load a single<script>
tag on a page per-script tag declaration. If it's already loaded on a page, it calls the callback from theonLoad
event immediately.
Sample usage:
this.scriptCache = cache({
google: 'https://api.google.com/some/script.js'
});
GoogleApi.js
is a script tag compiler. Essentially, this utility module builds a Google Script tag link allowing us to describe the pieces of the Google API we want to load inusing a JS object and letting it build the endpoint string.
Sample usage:
GoogleApi({
apiKey: apiKey,
libraries: ['places']
});
GoogleApiComponent.js
- The React wrapper which is responsible for loading a component and passing through thewindow.google
object after it's loaded on the page.
Sample usage:
const Container = React.createClass({
render: function() {
return <div>Google</div>;
}
})
export default GoogleApiComponent({
apiKey: __GAPI_KEY__
})(Container)
@joeida, not sure if still relevant to you, but I was scratching my head over the same thing, until I realised the pattern in the names. cache and GoogleApi are referring to the other 2 scripts. just change the import file location and name to refer to those scripts, and it will work.