Tiny API Loader

A tiny helper that takes the pain out of loading third-party API's

Overview

Consider the following pattern, which is common for loading third-party API's:

<script>
    function onApiLoaded() {
        // API is ready
    }
</script>

<script src="https://service.com/api?callback=onApiLoaded"></script>

Now consider having one or more external files, within which you want to use the API. What's the easiest way to guarantee that the API is available before trying to use it? You could define onApiLoaded in the global scope from within your file, or perhaps leverage event listeners, but you'll have to consider race conditions and the possibility of multiple entry points.

Tiny API Loader abstracts these issues away and gives you a simple Promise that will load an API (if it hasn't already) and then resolve with a reference to the API itself.

const foo = await loadApi();

// `foo` is a reference to the API.
foo.apiMethod();

What're the caveats?

Just one, and that's loading time. Loading the API with a traditional <script> embed will of course be slightly faster, although once cached the difference should be negligible.

You can mitigate some of this overhead by utilising <link rel="preconnect"> resource hints.

What's the footprint?

Tiny. Seriously. Minified and gzipped, the loader itself weighs in at less than 350 bytes, with the additional presets being even smaller.

Installation

> npm install tiny-api-loader

Presets

• Google Maps
• ReCaptcha
• YouTube Iframe

Google Maps

<!-- Optional resource hint -->
<link rel="preconnect" href="https://maps.googleapis.com">

import { loadGoogleMapsApi } from 'tiny-api-loader';

const api = await loadGoogleMapsApi({
    key: '[your api key]'
});

https://developers.google.com/maps/documentation/javascript/url-params

Param	Required	Description
key	✅	Your API key.
v	❌	The version of the Maps JavaScript API to use.
libraries	❌	A comma-separated list of additional Maps JavaScript API libraries to load.
language	❌	The language to use. This affects the names of controls, copyright notices, driving directions, and control labels, as well as the responses to service requests. See the list of supported languages.
region	❌	The region code to use. This alters the map's behaviour based on a given country or territory.

ReCaptcha

<!-- Optional resource hints -->
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>

import { loadReCaptchaApi } from 'tiny-api-loader';

const api = await loadReCaptchaApi();

https://developers.google.com/recaptcha/docs/loading

Param	Version	Required	Value	Description
render	2	❌	'explicit' 'onload'	Whether to render the widget explicitly. Defaults to onload, which will render the widget in the first g-recaptcha tag it finds.
	3	❌	[site key]	Register reCAPTCHA v3 keys on the reCAPTCHA Admin console.
hl	2	❌	See language codes	Forces the widget to render in a specific language. Auto-detects the user's language if unspecified.
	3	-	-	-

YouTube Iframe

<!-- Optional resource hint -->
<link rel="preconnect" href="https://www.youtube.com">

import { loadYouTubeIframeApi } from 'tiny-api-loader';

const api = await loadYouTubeIframeApi();

https://developers.google.com/youtube/iframe_api_reference