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 4.0.1 to 4.0.2
| { | ||
| "name": "react-intersection-observer", | ||
| "version": "4.0.1", | ||
| "version": "4.0.2", | ||
| "description": "Monitor if a component is inside the viewport, using IntersectionObserver API", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -12,26 +12,4 @@ # react-intersection-observer | ||
| ```js | ||
| import Observer from 'react-intersection-observer' | ||
| > **Storybook demo:** https://thebuilder.github.io/react-intersection-observer/ | ||
| const Component = () => ( | ||
| <Observer> | ||
| {inView => <h2>{`Header inside viewport ${inView}.`}</h2>} | ||
| </Observer> | ||
| ) | ||
| export default Component | ||
| ``` | ||
| ## Demo | ||
| See https://thebuilder.github.io/react-intersection-observer/ for a demo. | ||
| #### Scroll monitor | ||
| This module is used in | ||
| [react-scroll-percentage](https://github.com/thebuilder/react-scroll-percentage) | ||
| to monitor the scroll position of elements in view. This module is also a great | ||
| example of using `react-intersection-observer` as the basis for more complex | ||
| needs. | ||
| ## Installation | ||
@@ -51,18 +29,2 @@ | ||
| ## Props | ||
| The **`<Observer />`** accepts the following props: | ||
| | Name | Type | Default | Required | Description | | ||
| | --------------- | ----------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | **children** | Func/Node | | false | Children should be either a function or a node | | ||
| | **render** | ({inView, ref}) => Node | | false | Render prop allowing you to control the view. | | ||
| | **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 element when rendering using 'children'. Defaults to 'div' | | ||
| | **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 | | ||
| ## Usage | ||
@@ -126,4 +88,29 @@ | ||
| ### Polyfill for intersection-observer | ||
| ## Props | ||
| The **`<Observer />`** accepts the following props: | ||
| | Name | Type | Default | Required | Description | | ||
| | --------------- | ----------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | **children** | Func/Node | | false | Children should be either a function or a node | | ||
| | **render** | ({inView, ref}) => Node | | false | Render prop allowing you to control the view. | | ||
| | **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 element when rendering using 'children'. Defaults to 'div' | | ||
| | **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 | | ||
| ## Scroll monitor | ||
| This module is used in | ||
| [react-scroll-percentage](https://github.com/thebuilder/react-scroll-percentage) | ||
| to monitor the scroll position of elements in view. This module is also a great | ||
| example of using `react-intersection-observer` as the basis for more complex | ||
| needs. | ||
| ## Polyfill for intersection-observer | ||
| The component requires the [intersection-observer | ||
@@ -130,0 +117,0 @@ API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) |
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
Worsened metrics
- Total package byte prevSize
- decreased by-0.48%
43826
- Number of lines in readme file
- decreased by-7.43%
162
No dependency changes