@flyyer/use-googlefonts/dist/use-googlefonts.esm.js

React hook to dynamically load Google Fonts v2 during execution.

import { useState, useEffect } from 'react';
import FontFaceObserver from 'fontfaceobserver';

function unwrapExports (x) {
	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}

function createCommonjsModule(fn, module) {
	return module = { exports: {} }, fn(module, module.exports), module.exports;
}

var prod = createCommonjsModule(function (module, exports) {
Object.defineProperty(exports, '__esModule', { value: true });

var createCommonQuery = function createCommonQuery(_ref) {
  var family = _ref.family,
      styles = _ref.styles;
  var sFamily = family.replace(/ +/g, "+");
  styles.forEach(function (style, i, a) {
    if (!Array.isArray(style)) {
      //not an array
      if (style.length > 3) {
        //declarative
        if (style.length === 6) {
          a[i] = '1,400';
          return;
        } //italic


        if (style.length === 7) {
          a[i] = '0,400';
          return;
        } //regular


        if (style.length === 9) {
          a[i] = '1,' + style.substring(0, 3);
          return;
        } //NNNitalic


        if (style.length === 8) {
          a[i] = '0,' + style;
          return;
        } //NNN..NNN


        if (style.length === 14) {
          a[i] = '1,' + style.substring(0, 8);
          return;
        } //NNN..NNNitalic

      } else {
        //number only
        a[i] = '0,' + style;
      }
    } else {
      //array
      a[i] = (Boolean(style[1]) ? 1 : 0) + ',' + style[0];
    }
  });
  return "family=".concat(sFamily, ":ital,wght@").concat(styles.sort().join(";"), "&");
};

var assembleCommon = function assembleCommon(families, display) {
  return 'https://fonts.googleapis.com/css2?' + families.map(function (familyStyles) {
    return createCommonQuery(familyStyles);
  }).join('') + 'display=' + (display || 'auto');
};

var assembleFull = function assembleFull() {
  throw 'Not yet developed';
};

exports.assembleCommon = assembleCommon;
exports.assembleFull = assembleFull;

});

unwrapExports(prod);
var prod_1 = prod.assembleCommon;
prod.assembleFull;

var GoogleFontsStatus;
(function (GoogleFontsStatus) {
    GoogleFontsStatus[GoogleFontsStatus["LOADING"] = 0] = "LOADING";
    GoogleFontsStatus[GoogleFontsStatus["LOADED"] = 1] = "LOADED";
    GoogleFontsStatus[GoogleFontsStatus["FAILED"] = -1] = "FAILED";
})(GoogleFontsStatus || (GoogleFontsStatus = {}));
var defaultOptions = {
    display: "swap",
};
/**
 * Load fonts from `fonts` argument by creating a single URL which will be appended to the `<head/>` of the document as `<link href={} rel="stylesheet" />`.
 *
 * If there is any change in the arguments the current `<link />` will be removed and replaced by the new tag.
 *
 * Get the operation status (and `error` if present) via the `status` attribute of the returned object.
 */
function useGoogleFonts(fonts, options) {
    if (options === void 0) { options = defaultOptions; }
    var _a = useState(GoogleFontsStatus.LOADING), status = _a[0], setStatus = _a[1];
    var _b = useState(), error = _b[0], setError = _b[1];
    var href = fonts && fonts.length > 0 && options.display ? prod_1(fonts, options.display) : undefined;
    useEffect(function () {
        if (!href)
            return;
        var link = document.createElement("link");
        link.href = href;
        // link.crossOrigin = ""; // TODO: improve performance?
        link.rel = "stylesheet";
        document.head.appendChild(link);
        // TODO: what if deps changes and the previous promise resolves?
        var promises = fonts.map(function (font) { return new FontFaceObserver(font.family).load(); });
        Promise.all(promises)
            .then(function () {
            setError(undefined);
            setStatus(GoogleFontsStatus.LOADED);
        })
            .catch(function (err) {
            setError(err);
            setStatus(GoogleFontsStatus.FAILED);
        });
        return function () {
            setError(undefined);
            setStatus(GoogleFontsStatus.LOADING);
            document.head.removeChild(link);
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [href]); // `fonts` dependency is not required since `href` depends on `fonts`
    return { href: href, status: status, error: error };
}

export { GoogleFontsStatus, defaultOptions, useGoogleFonts };
//# sourceMappingURL=use-googlefonts.esm.js.map