react-intersection-observer - npm Package Compare versions

Comparing version 2.0.3 to 2.1.0

index.d.ts

@@ -54,2 +54,5 @@ declare module 'react-intersection-observer' {
     render?(): React.ReactNode;
+
+    /** Get a reference to the the inner DOM node */
+    innerRef?(element?: HTMLElement): void;
   }
@@ -56,0 +59,0 @@

lib/index.js

@@ -56,2 +56,6 @@ 'use strict';
       _this.observeNode();
+
+      if (_this.props.innerRef) {
+        _this.props.innerRef(node);
+      }
     }, _this.handleChange = function (inView) {
@@ -116,2 +120,3 @@ return _this.setState({ inView: inView });
           tag = _props2.tag,
+          innerRef = _props2.innerRef,
           triggerOnce = _props2.triggerOnce,
@@ -122,3 +127,3 @@ threshold = _props2.threshold,
           rootMargin = _props2.rootMargin,
-          props = _objectWithoutProperties(_props2, ['children', 'render', 'tag', 'triggerOnce', 'threshold', 'root', 'rootId', 'rootMargin']);
+          props = _objectWithoutProperties(_props2, ['children', 'render', 'tag', 'innerRef', 'triggerOnce', 'threshold', 'root', 'rootId', 'rootMargin']);
 
@@ -125,0 +130,0 @@ var inView = this.state.inView;

package.json

 {
   "name": "react-intersection-observer",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
@@ -52,3 +52,3 @@ "main": "lib/index.js",
   "jest": {
-    "testEnvironment": "node",
+    "testEnvironment": "jsdom",
     "snapshotSerializers": [
@@ -75,3 +75,3 @@ "enzyme-to-json/serializer"
     "babel-preset-stage-2": "^6.24.1",
-    "concurrently": "3.5.0",
+    "concurrently": "3.5.1",
     "enzyme": "^3.1.1",
@@ -78,0 +78,0 @@ "enzyme-adapter-react-16": "^1.0.4",

README.md

@@ -106,4 +106,4 @@ # react-intersection-observer
 
-| Name        | Type        | Default | Required | Description                                                                                                                                                                                                                      |
-| ----------- | ----------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Name            | Type        | Default | Required | Description                                                                                                                                                                                                                      |
+| --------------- | ----------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **children**    | func/node   |         | true     | Children should be either a function or a node                                                                                                                                                                                   |
@@ -113,3 +113,3 @@ | **root**        | HTMLElement |         | false    | The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.                                                                                |
 | **rootMargin**  | String      | '0px'   | false    | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                                                                                               |
-| **tag**        | String      | 'div'   | false    | Element tag to use for the wrapping component                                                                                                                                                                                    |
+| **tag**         | String      | 'div'   | false    | Element tag to use for the wrapping component                                                                                                                                                                                    |
 | **threshold**   | Number      | 0       | false    | Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                               |
@@ -119,2 +119,3 @@ | **triggerOnce** | Bool        | false   | false    | Only trigger this method once                                                                                                                                                                                                    |
 | **render**      | Func        |         | false    | Use render method to only render content when inView                                                                                                                                                                             |
+| **innerRef**    | Func        |         | false    | Get a reference to the the inner DOM node                                                                                                                                                                                        |
 
@@ -160,3 +161,5 @@ ## Example code
         <p>
-          {'Make sure that the Observer controls the height, so it does not change change when element is added.'}
+          {
+            'Make sure that the Observer controls the height, so it does not change change when element is added.'
+          }
         </p>
@@ -180,6 +183,4 @@ </div>
 const Component = () => (
-  <Observer onChange={(inView) => console.log('Inview:', inView)}>
-    <h2>
-      Plain children are always rendered. Use onChange to monitor state.
-    </h2>
+  <Observer onChange={inView => console.log('Inview:', inView)}>
+    <h2>Plain children are always rendered. Use onChange to monitor state.</h2>
   </Observer>
@@ -186,0 +187,0 @@ )

src/index.js

@@ -25,2 +25,4 @@ // @flow
   render?: () => React.Node,
+  /** Get a reference to the the inner DOM node */
+  innerRef?: (element: ?HTMLElement) => void,
 }
@@ -105,2 +107,6 @@
     this.observeNode()
+
+    if (this.props.innerRef) {
+      this.props.innerRef(node)
+    }
   }
@@ -115,2 +121,3 @@
       tag,
+      innerRef,
       triggerOnce,
@@ -117,0 +124,0 @@ threshold,

No alert changes

Improved metrics

Total package byte prevSize

43425

2.11%

Lines of code

568

2.16%

Number of lines in readme file

186

0.54%

No dependency changes