Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-intersection-observer
Advanced tools
react-intersection-observer - npm Package Compare versions
Comparing version 6.0.0 to 6.1.0
@@ -74,3 +74,2 @@ 'use strict'; | ||
| if (observerInstance) { | ||
| // $FlowFixMe - the interface in bom.js is wrong. Spec should accept the element. | ||
| observerInstance.unobserve(element); | ||
@@ -131,5 +130,3 @@ } | ||
| instance.visible = _inView; | ||
| if (instance.callback) { | ||
| instance.callback(_inView); | ||
| } | ||
| instance.callback(_inView); | ||
| } | ||
@@ -234,4 +231,2 @@ }); | ||
| console.warn('react-intersection-observer: "render" is deprecated, and should be replaced with "children"', this.node); | ||
| } else if (typeof this.props.children !== 'function') { | ||
| console.warn('react-intersection-observer: plain "children" is deprecated. You should convert it to a function that handles the "ref" manually.', this.node); | ||
| } | ||
@@ -238,0 +233,0 @@ invariant(this.node, 'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe.'); |
@@ -70,3 +70,2 @@ import { createElement, Component } from 'react'; | ||
| if (observerInstance) { | ||
| // $FlowFixMe - the interface in bom.js is wrong. Spec should accept the element. | ||
| observerInstance.unobserve(element); | ||
@@ -127,5 +126,3 @@ } | ||
| instance.visible = _inView; | ||
| if (instance.callback) { | ||
| instance.callback(_inView); | ||
| } | ||
| instance.callback(_inView); | ||
| } | ||
@@ -230,4 +227,2 @@ }); | ||
| console.warn('react-intersection-observer: "render" is deprecated, and should be replaced with "children"', this.node); | ||
| } else if (typeof this.props.children !== 'function') { | ||
| console.warn('react-intersection-observer: plain "children" is deprecated. You should convert it to a function that handles the "ref" manually.', this.node); | ||
| } | ||
@@ -234,0 +229,0 @@ invariant(this.node, 'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe.'); |
@@ -73,3 +73,2 @@ (function (global, factory) { | ||
| if (observerInstance) { | ||
| // $FlowFixMe - the interface in bom.js is wrong. Spec should accept the element. | ||
| observerInstance.unobserve(element); | ||
@@ -130,5 +129,3 @@ } | ||
| instance.visible = _inView; | ||
| if (instance.callback) { | ||
| instance.callback(_inView); | ||
| } | ||
| instance.callback(_inView); | ||
| } | ||
@@ -270,4 +267,2 @@ }); | ||
| console.warn('react-intersection-observer: "render" is deprecated, and should be replaced with "children"', this.node); | ||
| } else if (typeof this.props.children !== 'function') { | ||
| console.warn('react-intersection-observer: plain "children" is deprecated. You should convert it to a function that handles the "ref" manually.', this.node); | ||
| } | ||
@@ -274,0 +269,0 @@ invariant_1(this.node, 'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe.'); |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.ReactIntersectionObserver=t(e.React)}(this,function(a){"use strict";var l=new Map,d=new Map;function c(o){if(o){var e=l.get(o);if(e){var r=e.observerId,t=e.observer,n=r?d.get(r):t;n&&n.unobserve(o);var i=!1;r&&l.forEach(function(e,t){e&&e.observerId===r&&t!==o&&(i=!0)}),n&&!i&&(n.disconnect(),d.delete(r)),l.delete(o)}}}function p(e){e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,r=e.target,n=l.get(r);if(n&&0<=o){var i=n.options,s=!1;Array.isArray(i.threshold)?s=i.threshold.some(function(e){return n.visible?e<o:e<=o}):void 0!==i.threshold&&(s=n.visible?o>i.threshold:o>=i.threshold),void 0!==t&&(s=s&&t),n.visible=s,n.callback&&n.callback(s)}})}var h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},f=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},e=function(i){function s(){var e,t;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s);for(var o=arguments.length,r=Array(o),n=0;n<o;n++)r[n]=arguments[n];return(e=t=f(this,i.call.apply(i,[this].concat(r)))).state={inView:!1},t.node=null,t.handleNode=function(e){t.node&&c(t.node),t.node=e,t.observeNode()},t.handleChange=function(e){t.setState({inView:e}),t.props.onChange&&t.props.onChange(e)},f(t,e)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(s,i),s.prototype.componentDidMount=function(){},s.prototype.componentDidUpdate=function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||(c(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&(c(this.node),this.node=null)},s.prototype.componentWillUnmount=function(){this.node&&(c(this.node),this.node=null)},s.prototype.observeNode=function(){if(this.node){var e=this.props,t=e.threshold,o=e.root,r=e.rootMargin,n=e.rootId;!function(e,t){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{threshold:0},r=arguments[3],n=o.root,i=o.rootMargin,s=o.threshold||0;if(e&&t){var a=i?s.toString()+"_"+i:""+s.toString();n&&(a=r?r+"_"+a:null);var c=a?d.get(a):null;c||(c=new IntersectionObserver(p,o),a&&d.set(a,c));var h={callback:t,visible:!1,options:o,observerId:a,observer:a?void 0:c};l.set(e,h),c.observe(e)}}(this.node,this.handleChange,{threshold:t,root:o,rootMargin:r},n)}},s.prototype.render=function(){var e=this.props,t=e.children,o=e.render,r=e.tag,n=(e.triggerOnce,e.threshold,e.root,e.rootId,e.rootMargin,function(e,t){var o={};for(var r in e)0<=t.indexOf(r)||Object.prototype.hasOwnProperty.call(e,r)&&(o[r]=e[r]);return o}(e,["children","render","tag","triggerOnce","threshold","root","rootId","rootMargin"])),i=this.state.inView,s=t||o;return"function"==typeof s?s({inView:i,ref:this.handleNode}):a.createElement(r||"div",h({ref:this.handleNode},n),t)},s}(a.Component);return e.defaultProps={threshold:0,triggerOnce:!1},e}); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.ReactIntersectionObserver=t(e.React)}(this,function(a){"use strict";var d=new Map,l=new Map;function h(o){if(o){var e=d.get(o);if(e){var r=e.observerId,t=e.observer,n=r?l.get(r):t;n&&n.unobserve(o);var i=!1;r&&d.forEach(function(e,t){e&&e.observerId===r&&t!==o&&(i=!0)}),n&&!i&&(n.disconnect(),l.delete(r)),d.delete(o)}}}function p(e){e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,r=e.target,n=d.get(r);if(n&&0<=o){var i=n.options,s=!1;Array.isArray(i.threshold)?s=i.threshold.some(function(e){return n.visible?e<o:e<=o}):void 0!==i.threshold&&(s=n.visible?o>i.threshold:o>=i.threshold),void 0!==t&&(s=s&&t),n.visible=s,n.callback(s)}})}var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},f=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},e=function(i){function s(){var e,t;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s);for(var o=arguments.length,r=Array(o),n=0;n<o;n++)r[n]=arguments[n];return(e=t=f(this,i.call.apply(i,[this].concat(r)))).state={inView:!1},t.node=null,t.handleNode=function(e){t.node&&h(t.node),t.node=e,t.observeNode()},t.handleChange=function(e){t.setState({inView:e}),t.props.onChange&&t.props.onChange(e)},f(t,e)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(s,i),s.prototype.componentDidMount=function(){},s.prototype.componentDidUpdate=function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||(h(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&(h(this.node),this.node=null)},s.prototype.componentWillUnmount=function(){this.node&&(h(this.node),this.node=null)},s.prototype.observeNode=function(){if(this.node){var e=this.props,t=e.threshold,o=e.root,r=e.rootMargin,n=e.rootId;!function(e,t){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{threshold:0},r=arguments[3],n=o.root,i=o.rootMargin,s=o.threshold||0;if(e&&t){var a=i?s.toString()+"_"+i:""+s.toString();n&&(a=r?r+"_"+a:null);var h=a?l.get(a):null;h||(h=new IntersectionObserver(p,o),a&&l.set(a,h));var c={callback:t,visible:!1,options:o,observerId:a,observer:a?void 0:h};d.set(e,c),h.observe(e)}}(this.node,this.handleChange,{threshold:t,root:o,rootMargin:r},n)}},s.prototype.render=function(){var e=this.props,t=e.children,o=e.render,r=e.tag,n=(e.triggerOnce,e.threshold,e.root,e.rootId,e.rootMargin,function(e,t){var o={};for(var r in e)0<=t.indexOf(r)||Object.prototype.hasOwnProperty.call(e,r)&&(o[r]=e[r]);return o}(e,["children","render","tag","triggerOnce","threshold","root","rootId","rootMargin"])),i=this.state.inView,s=t||o;return"function"==typeof s?s({inView:i,ref:this.handleNode}):a.createElement(r||"div",c({ref:this.handleNode},n),t)},s}(a.Component);return e.defaultProps={threshold:0,triggerOnce:!1},e}); |
@@ -10,3 +10,3 @@ import React = require('react') | ||
| /** Children expects a function that recieves an object contain an `inView` boolean and `ref` that should be assigned to the element root. */ | ||
| children?: (fields: RenderProps) => React.ReactNode | ||
| children?: React.ReactNode | ((fields: RenderProps) => React.ReactNode) | ||
@@ -35,2 +35,8 @@ /** | ||
| /** | ||
| * Element tag to use for the wrapping component | ||
| * @default `'div'` | ||
| */ | ||
| tag?: string | ||
| /** Number between 0 and 1 indicating the the percentage that should be | ||
@@ -37,0 +43,0 @@ * visible before triggering. Can also be an array of numbers, to create |
| { | ||
| "name": "react-intersection-observer", | ||
| "version": "6.0.0", | ||
| "version": "6.1.0", | ||
| "description": "Monitor if a component is inside the viewport, using IntersectionObserver API", | ||
@@ -117,3 +117,3 @@ "main": "dist/react-intersection-observer.cjs.js", | ||
| "react-test-renderer": "^16.4.1", | ||
| "rollup": "^0.61.0", | ||
| "rollup": "^0.62.0", | ||
| "rollup-plugin-babel": "^3.0.5", | ||
@@ -120,0 +120,0 @@ "rollup-plugin-commonjs": "^9.1.0", |
@@ -1,3 +0,4 @@ | ||
| # react-intersection-observer <sup>[![Version Badge][npm-version-svg]][package-url]</sup> | ||
| # react-intersection-observer | ||
| [![Version Badge][npm-version-svg]][package-url] | ||
| [![Build Status][travis-svg]][travis-url] | ||
@@ -32,3 +33,3 @@ [![Coverage Statu][coveralls-svg]][coveralls-url] | ||
| > ⚠️You also want to add the [intersection-observer](https://www.npmjs.com/package/react-intersection-observer) polyfill for full browser support. Check out adding the [polyfill](#polyfill) for details about how you can include it. | ||
| > ⚠️ You also want to add the [intersection-observer](https://www.npmjs.com/package/react-intersection-observer) polyfill for full browser support. Check out adding the [polyfill](#polyfill) for details about how you can include it. | ||
@@ -43,3 +44,3 @@ ## Usage | ||
| ```js | ||
| ```jsx | ||
| import Observer from 'react-intersection-observer' | ||
@@ -60,2 +61,23 @@ | ||
| ### Plain children | ||
| You can pass any element to the `<Observer />`, and it will handle creating the wrapping DOM element. | ||
| Add a handler to the `onChange` method, and control the state in your own component. | ||
| It will pass any extra props to the HTML element, allowing you set the `className`, `style`, etc. | ||
| ```jsx | ||
| import Observer from 'react-intersection-observer' | ||
| const Component = () => ( | ||
| <Observer tag="div" onChange={inView => console.log('Inview:', inView)}> | ||
| <h2>Plain children are always rendered. Use onChange to monitor state.</h2> | ||
| </Observer> | ||
| ) | ||
| export default Component | ||
| ``` | ||
| > ⚠️ When rendering a plain child, make sure you keep your HTML output semantic. | ||
| > Change the `tag` to match the context, and add a `className` to style the `<Observer />`. | ||
| ## Props | ||
@@ -65,11 +87,11 @@ | ||
| | Name | Type | Default | Required | Description | | ||
| | --------------- | ----------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | **children** | ({inView, ref}) => Node | | true | Children expects a function that recieves an object contain an `inView` boolean and `ref` that should be assigned to the element root. | | ||
| | **onChange** | (inView) => void | | false | Call this function whenever the in view state changes | | ||
| | **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. | | ||
| | **rootId** | String | | false | Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused. If you defined a root element, without adding an id, it will create a new instance for all components. | | ||
| | **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). | | ||
| | **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. | | ||
| | **triggerOnce** | Bool | false | false | Only trigger this method once | | ||
| | Name | Type | Default | Required | Description | | ||
| | --------------- | ------------------------------------------ | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | **children** | ({inView, ref}) => React.Node / React.Node | | true | Children expects a function that receives an object contain an `inView` boolean and `ref` that should be assigned to the element root. Alternately pass a plain child, to have the `<Observer />` deal with the wrapping element. | | ||
| | **onChange** | (inView) => void | | false | Call this function whenever the in view state changes | | ||
| | **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. | | ||
| | **rootId** | String | | false | Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused. If you defined a root element, without adding an id, it will create a new instance for all components. | | ||
| | **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). | | ||
| | **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. | | ||
| | **triggerOnce** | Bool | false | false | Only trigger this method once | | ||
@@ -141,3 +163,3 @@ ## Usage in other projects | ||
| [package-url]: https://npmjs.org/package/react-intersection-observer | ||
| [npm-version-svg]: http://versionbadg.es/thebuilder/react-intersection-observer.svg | ||
| [npm-version-svg]: https://img.shields.io/npm/v/react-intersection-observer.svg | ||
| [travis-svg]: https://travis-ci.org/thebuilder/react-intersection-observer.svg | ||
@@ -144,0 +166,0 @@ [travis-url]: https://travis-ci.org/thebuilder/react-intersection-observer |
@@ -7,7 +7,9 @@ // @flow | ||
| type Props = { | ||
| /** Children expects a function that recieves an object contain an `inView` boolean and `ref` that should be assigned to the element root. */ | ||
| children?: ({ | ||
| inView: boolean, | ||
| ref: (node: ?HTMLElement) => void, | ||
| }) => React.Node, | ||
| /** Children expects a function that receives an object contain an `inView` boolean and `ref` that should be assigned to the element root. */ | ||
| children?: | ||
| | (({ | ||
| inView: boolean, | ||
| ref: (node: ?HTMLElement) => void, | ||
| }) => React.Node) | ||
| | React.Node, | ||
| /** @deprecated replace render with children */ | ||
@@ -18,3 +20,3 @@ render?: ({ | ||
| }) => React.Node, | ||
| /** @deprecated */ | ||
| /** Element tag to use for the wrapping element when rendering a plain React.Node. Defaults to 'div' */ | ||
| tag?: string, | ||
@@ -66,7 +68,2 @@ /** 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. */ | ||
| ) | ||
| } else if (typeof this.props.children !== 'function') { | ||
| console.warn( | ||
| `react-intersection-observer: plain "children" is deprecated. You should convert it to a function that handles the "ref" manually.`, | ||
| this.node, | ||
| ) | ||
| } | ||
@@ -73,0 +70,0 @@ invariant( |
@@ -81,3 +81,2 @@ // @flow | ||
| if (observerInstance) { | ||
| // $FlowFixMe - the interface in bom.js is wrong. Spec should accept the element. | ||
| observerInstance.unobserve(element) | ||
@@ -151,5 +150,3 @@ } | ||
| instance.visible = inView | ||
| if (instance.callback) { | ||
| instance.callback(inView) | ||
| } | ||
| instance.callback(inView) | ||
| } | ||
@@ -156,0 +153,0 @@ }) |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by14.29%
176
Worsened metrics
- Total package byte prevSize
- decreased by-0.51%
57760
- Lines of code
- decreased by-1.42%
1112
No dependency changes