react-in-viewport - npm Package Compare versions

Comparing version 1.0.0-alpha.16 to 1.0.0-alpha.17

dist/es/lib/handleViewport.js

@@ -39,3 +39,13 @@ "use strict";
 };
+/**
+ * @template P
+ * @param {ReactNode} TargetComponent
+ * @param {IntersectionObserverInit} options
+ * @returns {ComponentType<P & {
+      onEnterViewport?: VoidFunction
+      onLeaveViewport?: VoidFunction
+    }>}
+ */
 
+
 function handleViewport(TargetComponent, options, config) {
@@ -42,0 +52,0 @@ if (config === void 0) {

dist/es/lib/useInViewport.js

@@ -11,2 +11,10 @@ "use strict";
 // React hooks
+// eslint-disable-next-line no-unused-vars
+
+/**
+ *
+ * @param {MutableRefObject} target
+ * @param {IntersectionObserverInit} options
+ * @returns
+ */
 var useInViewport = function useInViewport(target, options, config, props) {
@@ -13,0 +21,0 @@ if (config === void 0) {

dist/lib/handleViewport.js

@@ -37,3 +37,13 @@ "use strict";
 };
+/**
+ * @template P
+ * @param {ReactNode} TargetComponent
+ * @param {IntersectionObserverInit} options
+ * @returns {ComponentType<P & {
+      onEnterViewport?: VoidFunction
+      onLeaveViewport?: VoidFunction
+    }>}
+ */
 
+
 function handleViewport(TargetComponent, options, config) {
@@ -40,0 +50,0 @@ if (config === void 0) {

dist/lib/useInViewport.js

@@ -11,2 +11,10 @@ "use strict";
 // React hooks
+// eslint-disable-next-line no-unused-vars
+
+/**
+ *
+ * @param {MutableRefObject} target
+ * @param {IntersectionObserverInit} options
+ * @returns
+ */
 var useInViewport = function useInViewport(target, options, config, props) {
@@ -13,0 +21,0 @@ if (config === void 0) {

dist/next/lib/handleViewport.js

@@ -12,3 +12,4 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 // HOC for handleViewport
-import React, { useRef, forwardRef } from 'react';
+// eslint-disable-next-line no-unused-vars
+import React, { useRef, forwardRef, ReactNode, ComponentType } from 'react';
 import hoistNonReactStatic from 'hoist-non-react-statics';
@@ -26,3 +27,13 @@ import useInViewport from './useInViewport';
 };
+/**
+ * @template P
+ * @param {ReactNode} TargetComponent
+ * @param {IntersectionObserverInit} options
+ * @returns {ComponentType<P & {
+      onEnterViewport?: VoidFunction
+      onLeaveViewport?: VoidFunction
+    }>}
+ */
 
+
 function handleViewport(TargetComponent, options, config) {
@@ -29,0 +40,0 @@ if (config === void 0) {

dist/next/lib/useInViewport.js

 // React hooks
-import { useEffect, useRef, useState } from 'react';
+// eslint-disable-next-line no-unused-vars
+import { useEffect, useRef, useState, MutableRefObject } from 'react';
 import { findDOMNode } from 'react-dom';
+/**
+ *
+ * @param {MutableRefObject} target
+ * @param {IntersectionObserverInit} options
+ * @returns
+ */
 
@@ -5,0 +12,0 @@ var useInViewport = function useInViewport(target, options, config, props) {

dist/umd/lib/handleViewport.js

@@ -47,3 +47,13 @@ (function (global, factory) {
   };
+  /**
+   * @template P
+   * @param {ReactNode} TargetComponent
+   * @param {IntersectionObserverInit} options
+   * @returns {ComponentType<P & {
+        onEnterViewport?: VoidFunction
+        onLeaveViewport?: VoidFunction
+      }>}
+   */
 
+
   function handleViewport(TargetComponent, options, config) {
@@ -50,0 +60,0 @@ if (config === void 0) {

dist/umd/lib/useInViewport.js

@@ -20,2 +20,10 @@ (function (global, factory) {
   // React hooks
+  // eslint-disable-next-line no-unused-vars
+
+  /**
+   *
+   * @param {MutableRefObject} target
+   * @param {IntersectionObserverInit} options
+   * @returns
+   */
   var useInViewport = function useInViewport(target, options, config, props) {
@@ -22,0 +30,0 @@ if (config === void 0) {

package.json

 {
   "name": "react-in-viewport",
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.17",
   "description": "Track React component in viewport using Intersection Observer API",
@@ -30,3 +30,4 @@ "author": "Roderick Hsiao <[e-mail]>",
     "test": "npm run lint && npm run testonly",
-    "testonly": "jest --config jest-config.js"
+    "testonly": "jest --config jest-config.js",
+    "typings": "tsc"
   },
@@ -70,3 +71,4 @@ "devDependencies": {
     "react-test-renderer": "^16.0.0",
-    "storybook-addon-jsx": "^7.0.0"
+    "storybook-addon-jsx": "^7.0.0",
+    "typescript": "^4.3.2"
   },
@@ -82,2 +84,3 @@ "peerDependencies": {
   "module": "dist/es/index.js",
+  "types": "dist/types/index.d.ts",
   "bundlesize": [
@@ -84,0 +87,0 @@ {

README.md

@@ -46,2 +46,3 @@ <p align="center">
 
+### Using Higher Order Component
 When wrapping your component with `handleViewport` HOC, you will receive `inViewport` props indicating whether the component is in the viewport or not.
@@ -61,3 +62,3 @@
 |-------------------|---------|------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------|
-| disconnectOnLeave | boolean | fasle                                                                                                                              | Disconnect intersection observer after leave |
+| disconnectOnLeave | boolean | false                                                                                                                              | Disconnect intersection observer after leave |
 
@@ -154,2 +155,35 @@ ### HOC Component Props
 
+### Using Hooks
+
+Alternatively, you can also directly using `useInViewport` hook which takes similar configuration as HOC.
+
+```js
+import React, { useRef } from 'react;
+import { useInViewport } from 'react-in-viewport';
+
+const MySectionBlock = () => {
+  const myRef = useRef();
+  const {
+    inViewport,
+    enterCount,
+    leaveCount,
+  } = useInViewport(
+    myRef,
+    options,
+    config = { disconnectOnLeave: false },
+    props
+  );
+
+  return (
+    <section ref={myRef}>
+      <div className="content" style={this.getStyle()}>
+        <h1>Hello</h1>
+        <p>{`Enter viewport: ${enterCount} times`}</p>
+        <p>{`Leave viewport: ${leaveCount} times`}</p>
+      </div>
+    </section>
+  );
+};
+```
+
 ## Note
@@ -156,0 +190,0 @@

No alert changes

Improved metrics

Total package byte prevSize

83787

increased by5.01%

Number of package files

31

increased by14.81%

Lines of code

1464

increased by9.17%

Number of lines in readme file

193

increased by21.38%

Worsened metrics

Dev dependency count

38

increased by2.7%

No dependency changes