react-in-viewport - npm Package Compare versions

Comparing version 1.0.0-alpha.25 to 1.0.0-alpha.26

dist/types/index.js

@@ -1,5 +0,13 @@
-import handleViewport from './lib/handleViewport';
-export const customProps = ['inViewport', 'enterCount', 'leaveCount'];
-export default handleViewport;
-export { default as handleViewport } from './lib/handleViewport';
-export { default as useInViewport } from './lib/useInViewport';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInViewport = exports.handleViewport = exports.customProps = void 0;
+const handleViewport_1 = __importDefault(require("./lib/handleViewport"));
+exports.customProps = ['inViewport', 'enterCount', 'leaveCount'];
+exports.default = handleViewport_1.default;
+var handleViewport_2 = require("./lib/handleViewport");
+Object.defineProperty(exports, "handleViewport", { enumerable: true, get: function () { return __importDefault(handleViewport_2).default; } });
+var useInViewport_1 = require("./lib/useInViewport");
+Object.defineProperty(exports, "useInViewport", { enumerable: true, get: function () { return __importDefault(useInViewport_1).default; } });

dist/types/lib/constants.js

@@ -1,7 +0,11 @@
-export const defaultOptions = {};
-export const defaultConfig = { disconnectOnLeave: false };
-export const noop = () => { };
-export const defaultProps = {
-    onEnterViewport: noop,
-    onLeaveViewport: noop,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = exports.noop = exports.defaultConfig = exports.defaultOptions = void 0;
+exports.defaultOptions = {};
+exports.defaultConfig = { disconnectOnLeave: false };
+const noop = () => { };
+exports.noop = noop;
+exports.defaultProps = {
+    onEnterViewport: exports.noop,
+    onLeaveViewport: exports.noop,
 };

dist/types/lib/handleViewport.js

@@ -1,6 +0,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, forwardRef } from 'react';
-import hoistNonReactStatic from 'hoist-non-react-statics';
-import useInViewport from './useInViewport';
-import { noop, defaultOptions, defaultConfig } from './constants';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hoist_non_react_statics_1 = __importDefault(require("hoist-non-react-statics"));
+const useInViewport_1 = __importDefault(require("./useInViewport"));
+const constants_1 = require("./constants");
 const isFunctionalComponent = (Component) => {
@@ -13,4 +18,4 @@ return (typeof Component === 'function'
 };
-function handleViewport(TargetComponent, options = defaultOptions, config = defaultConfig) {
-    const ForwardedRefComponent = forwardRef((props, ref) => {
+function handleViewport(TargetComponent, options = constants_1.defaultOptions, config = constants_1.defaultConfig) {
+    const ForwardedRefComponent = (0, react_1.forwardRef)((props, ref) => {
         const refProps = {
@@ -26,7 +31,7 @@ forwardedRef: ref,
         };
-        return (_jsx(TargetComponent, { ...props, ...refProps }));
+        return ((0, jsx_runtime_1.jsx)(TargetComponent, { ...props, ...refProps }));
     });
-    function InViewport({ onEnterViewport = noop, onLeaveViewport = noop, ...restProps }) {
-        const node = useRef();
-        const { inViewport, enterCount, leaveCount } = useInViewport(node, options, config, {
+    function InViewport({ onEnterViewport = constants_1.noop, onLeaveViewport = constants_1.noop, ...restProps }) {
+        const node = (0, react_1.useRef)();
+        const { inViewport, enterCount, leaveCount } = (0, useInViewport_1.default)(node, options, config, {
             onEnterViewport,
@@ -40,3 +45,3 @@ onLeaveViewport,
         };
-        return (_jsx(ForwardedRefComponent, { ...restProps, ...injectedProps, ref: node }));
+        return ((0, jsx_runtime_1.jsx)(ForwardedRefComponent, { ...restProps, ...injectedProps, ref: node }));
     }
@@ -47,4 +52,4 @@ const name = TargetComponent.displayName
     InViewport.displayName = `handleViewport(${name})`;
-    return hoistNonReactStatic(InViewport, ForwardedRefComponent);
+    return (0, hoist_non_react_statics_1.default)(InViewport, ForwardedRefComponent);
 }
-export default handleViewport;
+exports.default = handleViewport;

dist/types/lib/types.js

@@ -1,1 +0,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

dist/types/lib/useInViewport.js

@@ -1,16 +0,18 @@
-import { useEffect, useRef, useState, } from 'react';
-import { findDOMNode } from 'react-dom';
-import { defaultOptions, defaultConfig, defaultProps } from './constants';
-const useInViewport = (target, options = defaultOptions, config = defaultConfig, props = defaultProps) => {
+"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");
+const useInViewport = (target, options = constants_1.defaultOptions, config = constants_1.defaultConfig, props = constants_1.defaultProps) => {
     const { onEnterViewport, onLeaveViewport } = props;
-    const [, forceUpdate] = useState();
-    const observer = useRef();
-    const inViewportRef = useRef(false);
-    const intersected = useRef(false);
-    const enterCountRef = useRef(0);
-    const leaveCountRef = useRef(0);
+    const [, forceUpdate] = (0, react_1.useState)();
+    const observer = (0, react_1.useRef)();
+    const inViewportRef = (0, react_1.useRef)(false);
+    const intersected = (0, react_1.useRef)(false);
+    const enterCountRef = (0, react_1.useRef)(0);
+    const leaveCountRef = (0, react_1.useRef)(0);
     function startObserver({ observerRef }) {
         const targetRef = target.current;
         if (targetRef) {
-            const node = findDOMNode(targetRef);
+            const node = (0, react_dom_1.findDOMNode)(targetRef);
             if (node) {
@@ -24,3 +26,3 @@ observerRef?.observe(node);
         if (targetRef) {
-            const node = findDOMNode(targetRef);
+            const node = (0, react_dom_1.findDOMNode)(targetRef);
             if (node) {
@@ -68,3 +70,3 @@ observerRef?.unobserve(node);
     }
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         let observerRef = observer.current;
@@ -88,2 +90,2 @@ // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
 };
-export default useInViewport;
+exports.default = useInViewport;

package.json

 {
   "name": "react-in-viewport",
-  "version": "1.0.0-alpha.25",
+  "version": "1.0.0-alpha.26",
   "description": "Track React component in viewport using Intersection Observer API",
@@ -5,0 +5,0 @@ "author": "Roderick Hsiao <[e-mail]>",

tsconfig.json

@@ -11,3 +11,3 @@ {
     "jsx": "react-jsx",
-    "module": "ESNext",
+    "module": "commonjs",
     "moduleResolution": "node",
@@ -14,0 +14,0 @@ "noEmit": false,

No alert changes

Improved metrics

Total package byte prevSize

93732

increased by1.54%

Lines of code

1767

increased by1.14%

No dependency changes