react-in-viewport
Version:
Track React component in viewport using Intersection Observer API
66 lines (65 loc) • 2 kB
JavaScript
;
exports.__esModule = true;
exports["default"] = void 0;
var _react = require("react");
var _reactAspectRatio = require("react-aspect-ratio");
var _index = require("../../index");
var _constants = require("./constants");
var _jsxRuntime = require("react/jsx-runtime");
var DUMMY_IMAGE_SRC = 'https://www.gstatic.com/psa/static/1.gif';
var ImageObject = function ImageObject(props) {
var originalSrc = props.src,
ratio = props.ratio,
forwardedRef = props.forwardedRef,
inViewport = props.inViewport;
var _useState = (0, _react.useState)(DUMMY_IMAGE_SRC),
src = _useState[0],
setSrc = _useState[1];
var _useState2 = (0, _react.useState)(_constants.INIT),
status = _useState2[0],
setStatus = _useState2[1];
var loadImage = function loadImage(imageSrc) {
var img = new Image(); // eslint-disable-line
setStatus(_constants.LOADING);
img.onload = function () {
setSrc(imageSrc);
setStatus(_constants.LOADED);
};
img.alt = 'demo';
img.src = imageSrc;
};
(0, _react.useEffect)(function () {
if (inViewport && status === _constants.INIT) {
loadImage(originalSrc);
}
}, [inViewport, status]);
var getBackgroundColor = function getBackgroundColor() {
switch (status) {
case _constants.LOADING:
return 'rgba(0,0,0,.32)';
case _constants.LOADED:
return 'rgba(0,0,0,.50)';
case _constants.INIT:
default:
return 'rgba(0,0,0,.12)';
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAspectRatio.AspectRatio, {
ratio: ratio,
style: {
transitionDuration: '300ms',
maxWidth: '400px',
marginBottom: '200px',
backgroundColor: getBackgroundColor()
},
ref: forwardedRef,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
src: src,
alt: "demo"
})
});
};
var LazyImage = (0, _index.handleViewport)(ImageObject, {}, {
disconnectOnLeave: true
});
var _default = exports["default"] = LazyImage;