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)
The bit in ScriptCache.js on line 68 where you're replacing CALLBACK_NAME with the callback name is also stripping off libraries off of the end of the URL. For the time being I've fixed it by putting the callback as the last part of the Url in GoogleApi.js, but if anyone can come up with a better fix please let me know!