the-platform/Stylesheet.js

React Hooks and Suspense-ready Components for Web API's and elements

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useStylesheet = useStylesheet;
exports.Stylesheet = exports.StylesheetResource = void 0;

var _react = _interopRequireDefault(require("react"));

var _createResource = require("./createResource");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var StylesheetResource = (0, _createResource.createResource)(load, function (_ref) {
  var href = _ref.href,
      media = _ref.media;
  return "".concat(href, ".").concat(media);
});
exports.StylesheetResource = StylesheetResource;

function load(_ref2) {
  var href = _ref2.href,
      _ref2$media = _ref2.media,
      media = _ref2$media === void 0 ? 'all' : _ref2$media;
  return new Promise(function (resolve, reject) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    link.media = media;
    link.onload = resolve;
    link.onerror = reject;
    document.body.appendChild(link);
  });
}

var Stylesheet = function Stylesheet(props) {
  StylesheetResource.read(props);
  return _react.default.createElement("link", props);
};

exports.Stylesheet = Stylesheet;

function useStylesheet(props) {
  return StylesheetResource.read(props);
}