New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-in-viewport

Package Overview
Dependencies
Maintainers
1
Versions
74
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-in-viewport - npm Package Compare versions

Comparing version 1.0.0-alpha.30 to 1.0.0-beta.1

storybook.log

6

dist/es/lib/handleViewport.js

@@ -35,3 +35,3 @@ "use strict";

});
function InViewport(_ref) {
var InViewport = _ref => {
var {

@@ -42,3 +42,3 @@ onEnterViewport = _constants.noop,

restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
var node = (0, _react.useRef)();
var node = (0, _react.useRef)(null);
var {

@@ -60,3 +60,3 @@ inViewport,

}));
}
};
var name = TargetComponent.displayName || TargetComponent.name || 'Component';

@@ -63,0 +63,0 @@ InViewport.displayName = "handleViewport(" + name + ")";

12

dist/es/lib/useInViewport.js

@@ -6,3 +6,2 @@ "use strict";

var _react = require("react");
var _reactDom = require("react-dom");
var _constants = require("./constants");

@@ -34,4 +33,5 @@ var useInViewport = function useInViewport(target, options, config, props) {

var targetRef = target.current;
console.log(target);
if (targetRef) {
var node = (0, _reactDom.findDOMNode)(targetRef);
var node = targetRef;
if (node) {

@@ -48,3 +48,3 @@ observerRef == null ? void 0 : observerRef.observe(node);

if (targetRef) {
var node = (0, _reactDom.findDOMNode)(targetRef);
var node = targetRef;
if (node) {

@@ -57,3 +57,3 @@ observerRef == null ? void 0 : observerRef.unobserve(node);

}
function handleIntersection(entries) {
var handleIntersection = entries => {
var entry = entries[0] || {};

@@ -81,3 +81,3 @@ var {

if (config.disconnectOnLeave && observer.current) {
// disconnect obsever on leave
// disconnect observer on leave
observer.current.disconnect();

@@ -89,3 +89,3 @@ }

}
}
};
function initIntersectionObserver(_ref3) {

@@ -92,0 +92,0 @@ var {

6

dist/lib/handleViewport.js

@@ -35,3 +35,3 @@ "use strict";

});
function InViewport(_ref) {
var InViewport = function InViewport(_ref) {
var _ref$onEnterViewport = _ref.onEnterViewport,

@@ -42,3 +42,3 @@ onEnterViewport = _ref$onEnterViewport === void 0 ? _constants.noop : _ref$onEnterViewport,

restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
var node = (0, _react.useRef)();
var node = (0, _react.useRef)(null);
var _useInViewport = (0, _useInViewport2["default"])(node, options, config, {

@@ -59,3 +59,3 @@ onEnterViewport: onEnterViewport,

}));
}
};
var name = TargetComponent.displayName || TargetComponent.name || 'Component';

@@ -62,0 +62,0 @@ InViewport.displayName = "handleViewport(" + name + ")";

12

dist/lib/useInViewport.js

@@ -6,3 +6,2 @@ "use strict";

var _react = require("react");
var _reactDom = require("react-dom");
var _constants = require("./constants");

@@ -32,4 +31,5 @@ var useInViewport = function useInViewport(target, options, config, props) {

var targetRef = target.current;
console.log(target);
if (targetRef) {
var node = (0, _reactDom.findDOMNode)(targetRef);
var node = targetRef;
if (node) {

@@ -44,3 +44,3 @@ observerRef == null ? void 0 : observerRef.observe(node);

if (targetRef) {
var node = (0, _reactDom.findDOMNode)(targetRef);
var node = targetRef;
if (node) {

@@ -53,3 +53,3 @@ observerRef == null ? void 0 : observerRef.unobserve(node);

}
function handleIntersection(entries) {
var handleIntersection = function handleIntersection(entries) {
var entry = entries[0] || {};

@@ -75,3 +75,3 @@ var isIntersecting = entry.isIntersecting,

if (config.disconnectOnLeave && observer.current) {
// disconnect obsever on leave
// disconnect observer on leave
observer.current.disconnect();

@@ -83,3 +83,3 @@ }

}
}
};
function initIntersectionObserver(_ref3) {

@@ -86,0 +86,0 @@ var observerRef = _ref3.observerRef;

6

dist/next/lib/handleViewport.js

@@ -30,3 +30,3 @@ var _excluded = ["onEnterViewport", "onLeaveViewport"];

});
function InViewport(_ref) {
var InViewport = function InViewport(_ref) {
var _ref$onEnterViewport = _ref.onEnterViewport,

@@ -37,3 +37,3 @@ onEnterViewport = _ref$onEnterViewport === void 0 ? noop : _ref$onEnterViewport,

restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
var node = useRef();
var node = useRef(null);
var _useInViewport = useInViewport(node, options, config, {

@@ -54,3 +54,3 @@ onEnterViewport: onEnterViewport,

}));
}
};
var name = TargetComponent.displayName || TargetComponent.name || 'Component';

@@ -57,0 +57,0 @@ InViewport.displayName = "handleViewport(" + name + ")";

12

dist/next/lib/useInViewport.js
import { useEffect, useRef, useState } from 'react';
import { findDOMNode } from 'react-dom';
import { defaultOptions, defaultConfig, defaultProps } from './constants';

@@ -27,4 +26,5 @@ var useInViewport = function useInViewport(target, options, config, props) {

var targetRef = target.current;
console.log(target);
if (targetRef) {
var node = findDOMNode(targetRef);
var node = targetRef;
if (node) {

@@ -39,3 +39,3 @@ observerRef == null ? void 0 : observerRef.observe(node);

if (targetRef) {
var node = findDOMNode(targetRef);
var node = targetRef;
if (node) {

@@ -48,3 +48,3 @@ observerRef == null ? void 0 : observerRef.unobserve(node);

}
function handleIntersection(entries) {
var handleIntersection = function handleIntersection(entries) {
var entry = entries[0] || {};

@@ -70,3 +70,3 @@ var isIntersecting = entry.isIntersecting,

if (config.disconnectOnLeave && observer.current) {
// disconnect obsever on leave
// disconnect observer on leave
observer.current.disconnect();

@@ -78,3 +78,3 @@ }

}
}
};
function initIntersectionObserver(_ref3) {

@@ -81,0 +81,0 @@ var observerRef = _ref3.observerRef;

20

dist/stories/chapters/enterCallback.stories.js
"use strict";
exports.__esModule = true;
exports.ClassBaseComponent = ClassBaseComponent;
exports.FunctionalComponent = FunctionalComponent;
exports["default"] = void 0;
exports["default"] = exports.FunctionalComponent = exports.ClassBaseComponent = void 0;
var _addonActions = require("@storybook/addon-actions");

@@ -12,3 +10,3 @@ var _omit = _interopRequireDefault(require("lodash/omit"));

var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["forwardedRef", "inViewport"];
var _excluded = ["forwardedRef", "inViewport"]; // eslint-disable-line import/no-named-as-default
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

@@ -22,3 +20,3 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

});
function CustomAnchor(_ref) {
var CustomAnchor = function CustomAnchor(_ref) {
var forwardedRef = _ref.forwardedRef,

@@ -37,3 +35,3 @@ inViewport = _ref.inViewport,

}));
}
};
var ViewportAnchor = (0, _index["default"])(CustomAnchor, {}, {

@@ -58,3 +56,3 @@ disconnectOnLeave: false

exports["default"] = _default;
function ClassBaseComponent() {
var ClassBaseComponent = function ClassBaseComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ViewportBlock, {

@@ -68,4 +66,5 @@ onEnterViewport: function onEnterViewport() {

});
}
function FunctionalComponent() {
};
exports.ClassBaseComponent = ClassBaseComponent;
var FunctionalComponent = function FunctionalComponent() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ViewportAnchor, {

@@ -79,2 +78,3 @@ onEnterViewport: function onEnterViewport() {

});
}
};
exports.FunctionalComponent = FunctionalComponent;

26

dist/stories/chapters/lazyMedia.stories.js
"use strict";
exports.__esModule = true;
exports.ClassComponentLazyloadIframe = ClassComponentLazyloadIframe;
exports.ClassComponentLazyloadImage = ClassComponentLazyloadImage;
exports.FunctionalComponentLazyloadIframe = FunctionalComponentLazyloadIframe;
exports.FunctionalComponentLazyloadImage = FunctionalComponentLazyloadImage;
exports["default"] = void 0;
exports["default"] = exports.FunctionalComponentLazyloadImage = exports.FunctionalComponentLazyloadIframe = exports.ClassComponentLazyloadImage = exports.ClassComponentLazyloadIframe = void 0;
var _themeComponent = require("../common/themeComponent");

@@ -32,3 +28,3 @@ var _Iframe = _interopRequireDefault(require("../common/Iframe"));

exports["default"] = _default;
function ClassComponentLazyloadImage() {
var ClassComponentLazyloadImage = function ClassComponentLazyloadImage() {
var imageArray = [{

@@ -53,4 +49,5 @@ src: 'https://s-media-cache-ak0.pinimg.com/originals/cf/31/83/cf31837a53dc1cdb13880ac38c66d70d.jpg',

});
}
function ClassComponentLazyloadIframe() {
};
exports.ClassComponentLazyloadImage = ClassComponentLazyloadImage;
var ClassComponentLazyloadIframe = function ClassComponentLazyloadIframe() {
var iframeArray = [{

@@ -75,4 +72,5 @@ src: 'https://www.youtube.com/embed/hTcBnxxuAls',

});
}
function FunctionalComponentLazyloadImage() {
};
exports.ClassComponentLazyloadIframe = ClassComponentLazyloadIframe;
var FunctionalComponentLazyloadImage = function FunctionalComponentLazyloadImage() {
var imageArray = [{

@@ -97,4 +95,5 @@ src: 'https://s-media-cache-ak0.pinimg.com/originals/cf/31/83/cf31837a53dc1cdb13880ac38c66d70d.jpg',

});
}
function FunctionalComponentLazyloadIframe() {
};
exports.FunctionalComponentLazyloadImage = FunctionalComponentLazyloadImage;
var FunctionalComponentLazyloadIframe = function FunctionalComponentLazyloadIframe() {
var iframeArray = [{

@@ -119,2 +118,3 @@ src: 'https://www.youtube.com/embed/hTcBnxxuAls',

});
}
};
exports.FunctionalComponentLazyloadIframe = FunctionalComponentLazyloadIframe;

8

dist/stories/chapters/transition.stories.js
"use strict";
exports.__esModule = true;
exports.ClassComponentTransition = ClassComponentTransition;
exports["default"] = void 0;
exports["default"] = exports.ClassComponentTransition = void 0;
var _Section = _interopRequireDefault(require("../common/Section"));

@@ -25,4 +24,5 @@ var _themeComponent = require("../common/themeComponent");

exports["default"] = _default;
function ClassComponentTransition() {
var ClassComponentTransition = function ClassComponentTransition() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Section["default"], {});
}
};
exports.ClassComponentTransition = ClassComponentTransition;

9

dist/stories/common/Iframe.js

@@ -5,9 +5,6 @@ "use strict";

exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactAspectRatio = _interopRequireDefault(require("react-aspect-ratio"));
var _react = require("react");
var _reactAspectRatio = require("react-aspect-ratio");
var _index = require("../../index");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }

@@ -44,3 +41,3 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }

} : {};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAspectRatio["default"], {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAspectRatio.AspectRatio, {
ratio: ratio,

@@ -47,0 +44,0 @@ style: {

14

dist/stories/common/IframeFunctional.js

@@ -6,10 +6,9 @@ "use strict";

var _react = _interopRequireWildcard(require("react"));
var _reactAspectRatio = _interopRequireDefault(require("react-aspect-ratio"));
var _reactAspectRatio = require("react-aspect-ratio");
var _index = require("../../index");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 IframeFunctional(props) {
var IframeFunctional = function IframeFunctional(props) {
var inViewport = props.inViewport,

@@ -32,3 +31,3 @@ src = props.src,

} : {};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAspectRatio["default"], {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAspectRatio.AspectRatio, {
ratio: ratio,

@@ -38,10 +37,7 @@ style: {

backgroundColor: 'rgba(0,0,0,.12)'
}
// @ts-expect-error
// TODO: fix upstream types in react-aspect-ratio to support ref
,
},
ref: forwardedRef,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _extends({}, componentProps))
});
}
};
var LazyIframe = (0, _index.handleViewport)( /*#__PURE__*/(0, _react.memo)(IframeFunctional), {}, {

@@ -48,0 +44,0 @@ disconnectOnLeave: true

5

dist/stories/common/Image.js

@@ -6,7 +6,6 @@ "use strict";

var _react = _interopRequireWildcard(require("react"));
var _reactAspectRatio = _interopRequireDefault(require("react-aspect-ratio"));
var _reactAspectRatio = require("react-aspect-ratio");
var _constants = require("./constants");
var _index = require("../../index");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

@@ -67,3 +66,3 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

_proto.render = function render() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAspectRatio["default"], {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAspectRatio.AspectRatio, {
ratio: this.props.ratio,

@@ -70,0 +69,0 @@ style: {

18

dist/stories/common/ImageFunctional.js

@@ -5,12 +5,9 @@ "use strict";

exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactAspectRatio = _interopRequireDefault(require("react-aspect-ratio"));
var _react = require("react");
var _reactAspectRatio = require("react-aspect-ratio");
var _index = require("../../index");
var _constants = require("./constants");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var DUMMY_IMAGE_SRC = 'https://www.gstatic.com/psa/static/1.gif';
function ImageObject(props) {
var ImageObject = function ImageObject(props) {
var originalSrc = props.src,

@@ -52,3 +49,3 @@ ratio = props.ratio,

};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAspectRatio["default"], {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAspectRatio.AspectRatio, {
ratio: ratio,

@@ -60,6 +57,3 @@ style: {

backgroundColor: getBackgroundColor()
}
// @ts-expect-error
// TODO: fix upstream types in react-aspect-ratio to support ref
,
},
ref: forwardedRef,

@@ -71,3 +65,3 @@ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {

});
}
};
var LazyImage = (0, _index.handleViewport)(ImageObject, {}, {

@@ -74,0 +68,0 @@ disconnectOnLeave: true

4

dist/stories/common/Section.js

@@ -5,7 +5,5 @@ "use strict";

exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _react = require("react");
var _index = require("../../index");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }

@@ -12,0 +10,0 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }

14

dist/stories/common/themeComponent.js
"use strict";
exports.__esModule = true;
exports.Block = Block;
exports.PageTitle = exports.Card = void 0;
exports.Spacer = Spacer;
exports.Spacer = exports.PageTitle = exports.Card = exports.Block = void 0;
var _react = _interopRequireWildcard(require("react"));

@@ -70,3 +68,3 @@ var _jsxRuntime = require("react/jsx-runtime");

Card.displayName = 'Card';
function Block(props) {
var Block = function Block(props) {
var inViewport = props.inViewport,

@@ -91,5 +89,6 @@ enterCount = props.enterCount,

});
}
};
exports.Block = Block;
Block.displayName = 'Block';
function Spacer() {
var Spacer = function Spacer() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

@@ -108,3 +107,4 @@ style: {

});
}
};
exports.Spacer = Spacer;
Spacer.displayName = Spacer;

2

dist/types/lib/handleViewport.d.ts

@@ -5,5 +5,5 @@ /// <reference types="react" />

declare function handleViewport<TElement extends HTMLElement, TProps extends InjectedViewportProps<TElement>>(TargetComponent: React.ComponentType<TProps>, options?: Options, config?: Config): {
({ onEnterViewport, onLeaveViewport, ...restProps }: Omit<TProps, keyof InjectedViewportProps<TElement>> & CallbackProps): JSX.Element;
({ onEnterViewport, onLeaveViewport, ...restProps }: Omit<TProps, keyof InjectedViewportProps<TElement>> & CallbackProps): import("react/jsx-runtime").JSX.Element;
displayName: string;
} & hoistNonReactStatic.NonReactStatics<import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<TProps> & import("react").RefAttributes<TElement>>, {}>;
export default handleViewport;

6

dist/types/lib/handleViewport.js

@@ -30,4 +30,4 @@ "use strict";

});
function InViewport({ onEnterViewport = constants_1.noop, onLeaveViewport = constants_1.noop, ...restProps }) {
const node = (0, react_1.useRef)();
const InViewport = ({ onEnterViewport = constants_1.noop, onLeaveViewport = constants_1.noop, ...restProps }) => {
const node = (0, react_1.useRef)(null);
const { inViewport, enterCount, leaveCount } = (0, useInViewport_1.default)(node, options, config, {

@@ -44,3 +44,3 @@ onEnterViewport,

return ((0, jsx_runtime_1.jsx)(ForwardedRefComponent, { ...props, ref: node }));
}
};
const name = TargetComponent.displayName

@@ -47,0 +47,0 @@ || TargetComponent.name

12

dist/types/lib/useInViewport.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const react_dom_1 = require("react-dom");
const constants_1 = require("./constants");

@@ -16,4 +15,5 @@ const useInViewport = (target, options = constants_1.defaultOptions, config = constants_1.defaultConfig, props = constants_1.defaultProps) => {

const targetRef = target.current;
console.log(target);
if (targetRef) {
const node = (0, react_dom_1.findDOMNode)(targetRef);
const node = targetRef;
if (node) {

@@ -27,3 +27,3 @@ observerRef?.observe(node);

if (targetRef) {
const node = (0, react_dom_1.findDOMNode)(targetRef);
const node = targetRef;
if (node) {

@@ -36,3 +36,3 @@ observerRef?.unobserve(node);

}
function handleIntersection(entries) {
const handleIntersection = (entries) => {
const entry = entries[0] || {};

@@ -57,3 +57,3 @@ const { isIntersecting, intersectionRatio } = entry;

if (config.disconnectOnLeave && observer.current) {
// disconnect obsever on leave
// disconnect observer on leave
observer.current.disconnect();

@@ -65,3 +65,3 @@ }

}
}
};
function initIntersectionObserver({ observerRef }) {

@@ -68,0 +68,0 @@ if (!observerRef) {

6

dist/umd/lib/handleViewport.js

@@ -45,3 +45,3 @@ (function (global, factory) {

});
function InViewport(_ref) {
var InViewport = function InViewport(_ref) {
var _ref$onEnterViewport = _ref.onEnterViewport,

@@ -52,3 +52,3 @@ onEnterViewport = _ref$onEnterViewport === void 0 ? _constants.noop : _ref$onEnterViewport,

restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
var node = (0, _react.useRef)();
var node = (0, _react.useRef)(null);
var _useInViewport = (0, _useInViewport2["default"])(node, options, config, {

@@ -69,3 +69,3 @@ onEnterViewport: onEnterViewport,

}));
}
};
var name = TargetComponent.displayName || TargetComponent.name || 'Component';

@@ -72,0 +72,0 @@ InViewport.displayName = "handleViewport(" + name + ")";

19

dist/umd/lib/useInViewport.js
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "react", "react-dom", "./constants"], factory);
define(["exports", "react", "./constants"], factory);
} else if (typeof exports !== "undefined") {
factory(exports, require("react"), require("react-dom"), require("./constants"));
factory(exports, require("react"), require("./constants"));
} else {

@@ -10,6 +10,6 @@ var mod = {

};
factory(mod.exports, global.react, global.reactDom, global.constants);
factory(mod.exports, global.react, global.constants);
global.useInViewport = mod.exports;
}
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _reactDom, _constants) {
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _constants) {
"use strict";

@@ -42,4 +42,5 @@

var targetRef = target.current;
console.log(target);
if (targetRef) {
var node = (0, _reactDom.findDOMNode)(targetRef);
var node = targetRef;
if (node) {

@@ -54,3 +55,3 @@ observerRef == null ? void 0 : observerRef.observe(node);

if (targetRef) {
var node = (0, _reactDom.findDOMNode)(targetRef);
var node = targetRef;
if (node) {

@@ -63,3 +64,3 @@ observerRef == null ? void 0 : observerRef.unobserve(node);

}
function handleIntersection(entries) {
var handleIntersection = function handleIntersection(entries) {
var entry = entries[0] || {};

@@ -85,3 +86,3 @@ var isIntersecting = entry.isIntersecting,

if (config.disconnectOnLeave && observer.current) {
// disconnect obsever on leave
// disconnect observer on leave
observer.current.disconnect();

@@ -93,3 +94,3 @@ }

}
}
};
function initIntersectionObserver(_ref3) {

@@ -96,0 +97,0 @@ var observerRef = _ref3.observerRef;

20

package.json
{
"name": "react-in-viewport",
"version": "1.0.0-alpha.30",
"version": "1.0.0-beta.1",
"description": "Track React component in viewport using Intersection Observer API",

@@ -39,7 +39,8 @@ "author": "Roderick Hsiao <roderickhsiao@gmail.com>",

"@babel/preset-typescript": "^7.16.7",
"@storybook/addon-actions": "^7.0.0",
"@storybook/addon-docs": "^7.0.0",
"@storybook/addon-essentials": "^7.0.0",
"@storybook/react": "^7.0.0",
"@storybook/react-webpack5": "^7.0.0",
"@storybook/addon-actions": "^8.0.9",
"@storybook/addon-docs": "^8.0.9",
"@storybook/addon-essentials": "^8.0.9",
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
"@storybook/react": "^8.0.9",
"@storybook/react-webpack5": "^8.0.9",
"@testing-library/react": "^14.0.0",

@@ -71,6 +72,6 @@ "@types/hoist-non-react-statics": "^3.3.1",

"react": "^18.0.0",
"react-aspect-ratio": "^1.0.3",
"react-aspect-ratio": "^1.1.8",
"react-dom": "^18.0.0",
"react-test-renderer": "^18.0.0",
"storybook": "^7.0.0",
"storybook": "^8.0.9",
"typescript": "^5.0.0",

@@ -83,2 +84,5 @@ "webpack": "^5.75.0"

},
"resolutions": {
"jackspeak": "2.1.1"
},
"dependencies": {

@@ -85,0 +89,0 @@ "hoist-non-react-statics": "^3.0.0"

12

README.md

@@ -78,7 +78,7 @@ <p align="center">

| inViewport | boolean | false | Whether your component is in the viewport |
| forwardedRef | React ref | | If you are using a functional component, assign this prop as a ref on your component |
| forwardedRef | React ref | | Assign this prop as a ref on your component |
| enterCount | number | | Numbers of times your component has entered the viewport |
| leaveCount | number | | Number of times your component has left the viewport |
_NOTE_: Stateless: Need to add `ref={this.props.forwardedRef}` to your component
_NOTE_: Need to add `ref={this.props.forwardedRef}` to your component

@@ -137,5 +137,5 @@ #### Example of a functional component

render() {
const { enterCount, leaveCount } = this.props;
const { enterCount, leaveCount, forwardedRef } = this.props;
return (
<section>
<section ref={forwardedRef}>
<div className="content" style={this.getStyle()}>

@@ -188,8 +188,4 @@ <h1>Hello</h1>

## Note
This library is using `ReactDOM.findDOMNode` to access the DOM from a React element. This method is deprecated in `StrictMode`. We will update the package and release a major version when React 17 is out.
## Who is using this component
- [Tinder](https://tinder.com)
.github/workflows/build.yml

Sorry, the diff of this file is not supported yet

migration-storybook.log

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc