Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
svelte-intersection-observer
Advanced tools
svelte-intersection-observer - npm Package Compare versions
Comparing version 0.7.0 to 0.7.1
@@ -8,2 +8,12 @@ # Changelog | ||
| ## [0.7.1](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.7.1) - 2021-07-05 | ||
| **Documentation** | ||
| - add description for basic usage | ||
| - add `on:observe` example | ||
| - explain difference between `on:observe` and `on:intersect` | ||
| - document `IntersectionObserverEntry` interface | ||
| - re-order prop table so that `once` and `intersecting` are more prominent | ||
| ## [0.7.0](https://github.com/metonym/svelte-intersection-observer/releases/tag/v0.7.0) - 2021-04-23 | ||
@@ -10,0 +20,0 @@ |
@@ -325,3 +325,3 @@ (function (global, factory) { | ||
| /* src/IntersectionObserver.svelte generated by Svelte v3.37.0 */ | ||
| /* src/IntersectionObserver.svelte generated by Svelte v3.38.3 */ | ||
@@ -358,4 +358,4 @@ const get_default_slot_changes = dirty => ({ | ||
| if (default_slot) { | ||
| if (default_slot.p && dirty & /*$$scope, intersecting, entry, observer*/ 263) { | ||
| update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[8], dirty, get_default_slot_changes, get_default_slot_context); | ||
| if (default_slot.p && (!current || dirty & /*$$scope, intersecting, entry, observer*/ 263)) { | ||
| update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[8], !current ? -1 : dirty, get_default_slot_changes, get_default_slot_context); | ||
| } | ||
@@ -362,0 +362,0 @@ } |
| { | ||
| "name": "svelte-intersection-observer", | ||
| "version": "0.7.0", | ||
| "version": "0.7.1", | ||
| "license": "MIT", | ||
@@ -17,7 +17,10 @@ "description": "Detect if an element is in the viewport using the Intersection Observer API", | ||
| "prepack": "BUNDLE=true rollup -c", | ||
| "test": "svelte-check" | ||
| "test": "svelte-check --workspace=test", | ||
| "format": "prettier --write '.'" | ||
| }, | ||
| "devDependencies": { | ||
| "svelte": "^3.37.0", | ||
| "svelte-check": "^1.3.0", | ||
| "prettier": "^2.3.2", | ||
| "prettier-plugin-svelte": "^2.3.1", | ||
| "svelte": "^3.38.3", | ||
| "svelte-check": "^2.2.0", | ||
| "svelte-readme": "^3.1.0" | ||
@@ -24,0 +27,0 @@ }, |
116
README.md
@@ -5,3 +5,3 @@ # svelte-intersection-observer | ||
| > Detect if an element is in the viewport using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry). | ||
| > Detect if an element is in the viewport using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). | ||
@@ -14,7 +14,13 @@ <!-- REPO_URL --> | ||
| ## Install | ||
| ## Installation | ||
| **Yarn** | ||
| ```bash | ||
| yarn add -D svelte-intersection-observer | ||
| # OR | ||
| ``` | ||
| **NPM** | ||
| ```bash | ||
| npm i -D svelte-intersection-observer | ||
@@ -27,2 +33,6 @@ ``` | ||
| Use the [`bind:this`](https://svelte.dev/docs#bind_element) directive to pass an element reference to the `IntersectionObserver` component. | ||
| Then, simply bind to the reactive `intersecting` prop to determine if the element intersects the viewport. | ||
| ```svelte | ||
@@ -43,3 +53,2 @@ <script> | ||
| </IntersectionObserver> | ||
| ``` | ||
@@ -49,6 +58,4 @@ | ||
| Set `once` to `true` for the intersection event to occur only once. | ||
| Set `once` to `true` for the intersection event to occur only once. The `element` will be unobserved after the first intersection event occurs. | ||
| The `element` will be unobserved after the intersection occurs. | ||
| ```svelte | ||
@@ -67,3 +74,18 @@ <script> | ||
| </IntersectionObserver> | ||
| ``` | ||
| ### on:observe event | ||
| The `observe` event is dispatched when the element is first observed and also whenever an intersection event occurs. | ||
| ```html | ||
| <IntersectionObserver | ||
| {element} | ||
| on:observe="{(e) => { | ||
| console.log(e.detail); // IntersectionObserverEntry | ||
| console.log(e.detail.isIntersecting); // true | false | ||
| }}" | ||
| > | ||
| <div bind:this="{element}">Hello world</div> | ||
| </IntersectionObserver> | ||
| ``` | ||
@@ -73,4 +95,6 @@ | ||
| The "intersect" event is dispatched only if the observed element is intersecting the viewport. | ||
| As an alternative to binding the `intersecting` prop, you can listen to the `intersect` event that is dispatched if the observed element is intersecting the viewport. | ||
| **Compared to `on:observe`, this event is dispatched only when the element is _intersecting the viewport_.** | ||
| ```html | ||
@@ -91,5 +115,7 @@ <IntersectionObserver | ||
| | Prop name | Description | Value | | ||
| | Name | Description | Value | | ||
| | :----------- | :---------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- | | ||
| | element | Element observed for intersection | `HTMLElement` | | ||
| | once | If `true`, the observed element will be unobserved upon intersect | `boolean` (default: `false`) | | ||
| | intersecting | `true` if the observed element is intersecting the viewport | `boolean` (default: `false`) | | ||
| | root | Containing element | `null` or `HTMLElement` (default: `null`) | | ||
@@ -99,4 +125,2 @@ | rootMargin | Margin offset of the containing element | `string` (default: `"0px"`) | | ||
| | entry | Observed element metadata | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) | | ||
| | once | If `true`, the observed element will be unobserved upon intersect | `boolean` (default: `false`) | | ||
| | intersecting | `true` if the observed element is intersecting the viewport | `boolean` (default: `false`) | | ||
| | observer | IntersectionObserver instance | [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) | | ||
@@ -106,9 +130,73 @@ | ||
| - **on:observe**: fired when an intersection change occurs (type `IntersectionObserverEntry`) | ||
| - **on:intersect**: fired when an intersection change occurs and the element is intersecting (type `IntersectionObserverEntry`) | ||
| - **on:observe**: fired when the element is first observed or whenever an intersection change occurs | ||
| - **on:intersect**: fired when the element is intersecting the viewport | ||
| The `e.detail` dispatched by the `observe` and `intersect` events is an [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) interface. | ||
| Note that all properties in `IntersectionObserverEntry` are read only. | ||
| <details> | ||
| <summary><code>IntersectionObserverEntry</code></summary> | ||
| <!-- prettier-ignore-start --> | ||
| ```js | ||
| interface IntersectionObserverEntry { | ||
| target: HTMLElement; | ||
| time: number; | ||
| isIntersecting: boolean; | ||
| isVisible: boolean; | ||
| intersectionRatio: number; | ||
| intersectionRect: { | ||
| bottom: number; | ||
| height: number; | ||
| left: number; | ||
| right: number; | ||
| top: number; | ||
| width: number; | ||
| x: number; | ||
| y: number; | ||
| }; | ||
| rootBounds: { | ||
| bottom: number; | ||
| height: number; | ||
| left: number; | ||
| right: number; | ||
| top: number; | ||
| width: number; | ||
| x: number; | ||
| y: number; | ||
| }; | ||
| boundingClientRect: { | ||
| bottom: number; | ||
| height: number; | ||
| left: number; | ||
| right: number; | ||
| top: number; | ||
| width: number; | ||
| x: number; | ||
| y: number; | ||
| }; | ||
| } | ||
| ``` | ||
| <!-- prettier-ignore-end --> | ||
| </details> | ||
| ## Examples | ||
| The [examples folder](examples/) contains sample set-ups. | ||
| - [examples/sveltekit](examples/sveltekit) | ||
| - [examples/svite](examples/svite) | ||
| - [examples/sapper](examples/sapper) | ||
| - [examples/snowpack](examples/snowpack) | ||
| - [examples/rollup](examples/rollup) | ||
| - [examples/webpack](examples/webpack) | ||
| ## TypeScript support | ||
| Svelte version 3.31.0 or greater is required to use this module with TypeScript. | ||
| Svelte version 3.31 or greater is required to use this module with TypeScript. | ||
| TypeScript definitions for this component are located in the [types folder](types/). | ||
| ## Changelog | ||
@@ -115,0 +203,0 @@ |
Sorry, the diff of this file is not supported yet
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 by6.88%
44104
- Number of lines in readme file
- increased by77.19%
202
Worsened metrics
- Dev dependency count
- increased by66.67%
5
No dependency changes