react-intersection-observer
Advanced tools
react-intersection-observer - npm Package Compare versions
Comparing version 2.0.3 to 2.1.0
@@ -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 @@ |
@@ -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; |
| { | ||
| "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", |
@@ -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 @@ ) |
@@ -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, |
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 by2.11%
43425
- Lines of code
- increased by2.16%
568
- Number of lines in readme file
- increased by0.54%
186