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 2.0.2 to 2.0.3
@@ -54,3 +54,3 @@ declare module 'react-intersection-observer' { | ||
| render?(): React.ReactNode; | ||
| }; | ||
| } | ||
@@ -57,0 +57,0 @@ export default class IntersectionObserver extends React.Component< |
@@ -79,3 +79,3 @@ "use strict"; | ||
| // Check if we are stilling observing any elements with the same threshold. | ||
| // Check if we are still observing any elements with the same threshold. | ||
| var itemsLeft = false; | ||
@@ -82,0 +82,0 @@ if (_observerId) { |
| { | ||
| "name": "react-intersection-observer", | ||
| "version": "2.0.2", | ||
| "version": "2.0.3", | ||
| "description": "Monitor if a component is inside the viewport, using IntersectionObserver API", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -15,5 +15,9 @@ # react-intersection-observer | ||
| <Observer> | ||
| {inView => <h2>{`Header inside viewport ${inView}.`}</h2>} | ||
| </Observer> | ||
| const Component = () => ( | ||
| <Observer> | ||
| {inView => <h2>{`Header inside viewport ${inView}.`}</h2>} | ||
| </Observer> | ||
| ) | ||
| export default Component | ||
| ``` | ||
@@ -105,11 +109,11 @@ | ||
| | ----------- | ----------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | children | func/node | | true | Children should be either a function or a node | | ||
| | 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). | | ||
| | 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. | | ||
| | triggerOnce | Bool | false | false | Only trigger this method once | | ||
| | onChange | Func | | false | Call this function whenever the in view state changes | | ||
| | render | Func | | false | Use render method to only render content when inView | | ||
| | **children** | func/node | | true | Children should be either a function or a node | | ||
| | **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). | | ||
| | **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. | | ||
| | **triggerOnce** | Bool | false | false | Only trigger this method once | | ||
| | **onChange** | Func | | false | Call this function whenever the in view state changes | | ||
| | **render** | Func | | false | Use render method to only render content when inView | | ||
@@ -126,5 +130,9 @@ ## Example code | ||
| <Observer> | ||
| {inView => <h2>{`Header inside viewport ${inView}.`}</h2>} | ||
| </Observer> | ||
| const Component = () => ( | ||
| <Observer> | ||
| {inView => <h2>{`Header inside viewport ${inView}.`}</h2>} | ||
| </Observer> | ||
| ) | ||
| export default Component | ||
| ``` | ||
@@ -140,18 +148,22 @@ | ||
| <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> | ||
| )} | ||
| /> | ||
| const Component = () => ( | ||
| <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> | ||
| )} | ||
| /> | ||
| ) | ||
| export default Component | ||
| ``` | ||
@@ -167,7 +179,11 @@ | ||
| <Observer onChange={(inView) => console.log('Inview:', inView)}> | ||
| <h2> | ||
| Plain children are always rendered. Use onChange to monitor state. | ||
| </h2> | ||
| </Observer> | ||
| const Component = () => ( | ||
| <Observer onChange={(inView) => console.log('Inview:', inView)}> | ||
| <h2> | ||
| Plain children are always rendered. Use onChange to monitor state. | ||
| </h2> | ||
| </Observer> | ||
| ) | ||
| export default Component | ||
| ``` |
@@ -85,3 +85,3 @@ // @flow | ||
| // Check if we are stilling observing any elements with the same threshold. | ||
| // Check if we are still observing any elements with the same threshold. | ||
| let itemsLeft = false | ||
@@ -88,0 +88,0 @@ if (observerId) { |
Sorry, the diff of this file is not supported yet
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
- Total package byte prevSize
- increased by0.7%
42529
- Number of lines in readme file
- increased by9.47%
185
No dependency changes