react-intersection-observer - npm Package Compare versions

Comparing version 2.1.2 to 3.0.0

index.d.ts

@@ -8,2 +8,6 @@ declare module 'react-intersection-observer' {
 
+    /** Render prop boolean indicating inView state */
+    render?(inView: boolean): React.ReactNode;
+
+
     /**
@@ -53,5 +57,2 @@ * The `HTMLElement` that is used as the viewport for checking visibility of
 
-    /** Use `render` method to only render content when inView */
-    render?(): React.ReactNode;
-
     /** Get a reference to the the inner DOM node */
@@ -58,0 +59,0 @@ innerRef?(element?: HTMLElement): void;

lib/index.js

@@ -134,5 +134,5 @@ 'use strict';
       // If render is a function, use it to render content when in view
-      inView && typeof render === 'function' ? render() : null,
-      // // If children is a function, render it with the current inView status.
-      // // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
+      typeof render === 'function' ? render(inView) : null,
+      // If children is a function, render it with the current inView status.
+      // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
       typeof children === 'function' ? children(inView) : children);
@@ -139,0 +139,0 @@ }

package.json

 {
   "name": "react-intersection-observer",
-  "version": "2.1.2",
+  "version": "3.0.0",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
@@ -70,3 +70,3 @@ "main": "lib/index.js",
     "babel-core": "^6.25.0",
-    "babel-jest": "^21.2.0",
+    "babel-jest": "^22.0.0",
     "babel-preset-env": "^1.6.1",
@@ -85,3 +85,3 @@ "babel-preset-react": "^6.24.1",
     "intersection-observer": "^0.5.0",
-    "jest": "^21.2.1",
+    "jest": "^22.0.0",
     "lint-staged": "^6.0.0",
@@ -88,0 +88,0 @@ "prettier": "^1.8.1",

README.md

@@ -116,3 +116,3 @@ # react-intersection-observer
 | **onChange**    | Func        |         | false    | Call this function whenever the in view state changes                                                                                                                                                                            |
-| **render**      | Func        |         | false    | Use render method to only render content when inView                                                                                                                                                                             |
+| **render**      | Func        |         | false    | Render prop boolean indicating inView state                                                                                                                                                                             |
 | **innerRef**    | Func        |         | false    | Get a reference to the the inner DOM node                                                                                                                                                                                        |
@@ -139,6 +139,4 @@
 
-### Render callback
+### Render prop
 
-For simple use cases where you want to only render a component when it enters
-view, you can use the `render` prop.
 
@@ -150,17 +148,4 @@ ```js
   <Observer
-    style={{ height: 200, position: 'relative' }}
-    render={() => (
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-        }}
-      >
-        <p>
-          {
-            'Make sure that the Observer controls the height, so it does not change change when element is added.'
-          }
-        </p>
-      </div>
+    render={(inView) => (
+      inView => <h2>{`Header inside viewport ${inView}.`}</h2>
     )}
@@ -167,0 +152,0 @@ />

src/index.js

@@ -12,2 +12,4 @@ // @flow
   children?: ((inView: boolean) => React.Node) | React.Node,
+  /** Render prop boolean indicating inView state */
+  render?: (inView: boolean) => React.Node,
   /** 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. */
@@ -24,4 +26,2 @@ threshold?: number | Array<number>,
   onChange?: (inView: boolean) => void,
-  /** Use render method to only render content when inView */
-  render?: () => React.Node,
   /** Get a reference to the the inner DOM node */
@@ -139,5 +139,5 @@ innerRef?: Function,
       // If render is a function, use it to render content when in view
-      inView && typeof render === 'function' ? render() : null,
-      // // If children is a function, render it with the current inView status.
-      // // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
+      typeof render === 'function' ? render(inView) : null,
+      // If children is a function, render it with the current inView status.
+      // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
       typeof children === 'function' ? children(inView) : children,
@@ -144,0 +144,0 @@ )

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

42980

decreased by-0.96%

Number of lines in readme file

171

decreased by-8.06%

No dependency changes