react-img-webp/dist/react-img-webp.esm.js

React rendering WebP on supported platforms

import { createContext, memo, createElement, useState, useEffect } from 'react';

function _typeof(obj) {
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function (obj) {
      return typeof obj;
    };
  } else {
    _typeof = function (obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    };
  }

  return _typeof(obj);
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }

  return target;
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

var WebP = createContext({
  supportWebP: false
});

var Image = memo(function (props) {
  var childProps = _objectSpread({}, props);

  delete childProps.webP;
  return createElement(WebP.Consumer, null, function (value) {
    return createElement("img", _extends({}, childProps, {
      src: value.supportWebP && props.webP || props.src
    }));
  });
});

var checked; // eslint-disable-line

function canUseWebP() {
  if ("undefined" !== typeof checked) {
    return checked;
  }

  if ("object" !== (typeof document === "undefined" ? "undefined" : _typeof(document))) {
    return false;
  }

  var canvas = document.createElement("canvas");

  if (!canvas.getContext || !canvas.getContext("2d")) {
    return checked = false;
  }

  return checked = canvas.toDataURL("image/webp").indexOf("data:image/webp") === 0;
}

var WebPController = function WebPController(_ref) {
  var accept = _ref.accept,
      children = _ref.children;

  var _React$useState = useState("string" === typeof accept && accept.indexOf("image/webp") !== -1),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      supportWebP = _React$useState2[0],
      setSupport = _React$useState2[1];

  useEffect(function () {
    if (!supportWebP && canUseWebP()) {
      setSupport(true);
    }
  }, []);
  return createElement(WebP.Provider, {
    value: {
      supportWebP: supportWebP
    }
  }, children);
};



var ContextPackage = /*#__PURE__*/Object.freeze({
  Image: Image,
  WebP: WebP,
  WebPController: WebPController
});

var Image$1 = memo(function (props) {
  var childProps = _objectSpread({}, props);

  delete childProps.webP;
  delete childProps.useWebP;
  return createElement("img", _extends({}, childProps, {
    src: props.useWebP && props.webP || props.src
  }));
});
var ImageDefaultProps = {
  useWebP: canUseWebP()
};
Image$1.defaultProps = ImageDefaultProps;

var Context = ContextPackage;

export { Context, Image$1 as Image, canUseWebP };