react-intersection-observer - npm Package Compare versions

Comparing version 9.13.1 to 9.14.0

dist/esm/index.js

@@ -217,3 +217,3 @@ "use client";
   const [ref, setRef] = React2.useState(null);
-  const callback = React2.useRef();
+  const callback = React2.useRef(onChange);
   const [state, setState] = React2.useState({
@@ -274,3 +274,3 @@ inView: !!initialInView,
   const entryTarget = (_a = state.entry) == null ? void 0 : _a.target;
-  const previousEntryTarget = React2.useRef();
+  const previousEntryTarget = React2.useRef(void 0);
   if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {
@@ -277,0 +277,0 @@ previousEntryTarget.current = entryTarget;

dist/index.d.ts

@@ -163,3 +163,3 @@ import * as React from 'react';
      */
-    as?: keyof JSX.IntrinsicElements;
+    as?: React.ElementType;
     /** Call this function whenever the in view state changes */
@@ -166,0 +166,0 @@ onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void;

dist/index.js

@@ -254,3 +254,3 @@ "use strict";
   const [ref, setRef] = React2.useState(null);
-  const callback = React2.useRef();
+  const callback = React2.useRef(onChange);
   const [state, setState] = React2.useState({
@@ -311,3 +311,3 @@ inView: !!initialInView,
   const entryTarget = (_a = state.entry) == null ? void 0 : _a.target;
-  const previousEntryTarget = React2.useRef();
+  const previousEntryTarget = React2.useRef(void 0);
   if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {
@@ -314,0 +314,0 @@ previousEntryTarget.current = entryTarget;

package.json

 {
   "name": "react-intersection-observer",
-  "version": "9.13.1",
+  "version": "9.14.0",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
@@ -113,29 +113,28 @@ "type": "commonjs",
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.15.3",
-    "@biomejs/biome": "^1.8.3",
-    "@size-limit/preset-small-lib": "^11.1.4",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/browser": "^2.0.1",
-    "@vitest/coverage-istanbul": "^2.0.1",
-    "jsdom": "^24.1.0",
-    "lint-staged": "^15.2.7",
+    "@arethetypeswrong/cli": "^0.17.1",
+    "@biomejs/biome": "^1.9.4",
+    "@size-limit/preset-small-lib": "^11.1.6",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^2.1.8",
+    "@vitest/coverage-istanbul": "^2.1.8",
+    "lint-staged": "^15.2.11",
     "microbundle": "^0.15.1",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.45.1",
-    "publint": "^0.2.8",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "playwright": "^1.49.1",
+    "publint": "^0.2.12",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "simple-git-hooks": "^2.11.1",
-    "size-limit": "^11.1.4",
-    "tsup": "^8.1.0",
-    "typescript": "^5.5.3",
-    "vitest": "^2.0.1"
+    "size-limit": "^11.1.6",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
   },
@@ -148,8 +147,2 @@ "peerDependenciesMeta": {
   "pnpm": {
-    "peerDependencyRules": {
-      "allowedVersions": {
-        "react": "18",
-        "vite": "5"
-      }
-    },
     "allowedDeprecatedVersions": {
@@ -156,0 +149,0 @@ "rollup-plugin-terser": "*",

README.md

@@ -241,2 +241,6 @@ # react-intersection-observer
 
+> [!TIP]
+> Consider using [Vitest Browser Mode](https://vitest.dev/guide/browser/) instead of `jsdom` or `happy-dom`.
+> This option allows you to utilize the real browser implementation and triggers correctly when scrolling or adding elements to the viewport. You can skip the `react-intersection-observer/test-utils`, or use it as needed.
+
 In order to write meaningful tests, the `IntersectionObserver` needs to be
@@ -243,0 +247,0 @@ mocked. You can use the included `react-intersection-observer/test-utils` to

test-utils/index.js

@@ -78,3 +78,3 @@ "use strict";
 function setupIntersectionMocking(mockFn) {
-  global.IntersectionObserver = mockFn((cb, options = {}) => {
+  window.IntersectionObserver = mockFn((cb, options = {}) => {
     var _a, _b, _c;
@@ -107,4 +107,4 @@ const item = {
 function resetIntersectionMocking() {
-  if (global.IntersectionObserver && "mockClear" in global.IntersectionObserver && typeof global.IntersectionObserver.mockClear === "function") {
-    global.IntersectionObserver.mockClear();
+  if (window.IntersectionObserver && "mockClear" in window.IntersectionObserver && typeof window.IntersectionObserver.mockClear === "function") {
+    window.IntersectionObserver.mockClear();
   }
@@ -114,3 +114,5 @@ observers.clear();
 function getIsReactActEnvironment() {
-  return Boolean(global.IS_REACT_ACT_ENVIRONMENT);
+  return Boolean(
+    typeof window !== "undefined" && window.IS_REACT_ACT_ENVIRONMENT
+  );
 }
@@ -117,0 +119,0 @@ function triggerIntersection(elements, trigger, observer, item) {

No alert changes

Improved metrics

Total package byte prevSize

129774

increased by0.26%

Dev dependency count

22

decreased by-4.35%

Lines of code

1452

increased by0.28%

Number of lines in readme file

513

increased by0.79%

No dependency changes