react-intersection-observer - npm Package Compare versions

Comparing version 9.10.3 to 9.11.0

package.json

 {
   "name": "react-intersection-observer",
-  "version": "9.10.3",
+  "version": "9.11.0",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
   "type": "commonjs",
-  "source": "./src/index.tsx",
-  "main": "./index.js",
-  "module": "./esm/index.js",
-  "types": "./index.d.ts",
+  "source": "src/index.tsx",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     "./test-utils": {
-      "types": "./test-utils.d.mts",
-      "require": "./test-utils.js",
-      "default": "./test-utils.mjs"
+      "types": "./dist/test-utils.d.mts",
+      "require": "./dist/test-utils.js",
+      "default": "./dist/test-utils.mjs"
     },
     ".": {
-      "types": "./index.d.mts",
-      "require": "./index.js",
-      "default": "./index.mjs"
+      "types": "./dist/index.d.mts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
     }
   },
+  "files": [
+    "dist"
+  ],
   "author": "Daniel Schmidt",
@@ -29,2 +32,18 @@ "license": "MIT",
   },
+  "packageManager": "pnpm@9.5.0+sha256.dbdf5961c32909fb030595a9daa1dae720162e658609a8f92f2fa99835510ca5",
+  "scripts": {
+    "prebuild": "rm -rf dist lib",
+    "build": "run-s build:*",
+    "build:bundle": "tsup src/index.tsx",
+    "build:legacy": "tsup src/index.tsx --format esm --legacy-output --no-clean --no-dts",
+    "build:utils": "tsup src/test-utils.ts --no-clean --no-sourcemap",
+    "postbuild": "size-limit",
+    "dev": "run-p dev:*",
+    "dev:package": "tsup src/index.tsx --watch",
+    "dev:storybook": "pnpm --filter storybook dev",
+    "lint": "biome check .",
+    "version": "pnpm build",
+    "storybook:build": "pnpm build:bundle && pnpm --filter storybook build",
+    "test": "vitest"
+  },
   "keywords": [
@@ -42,2 +61,45 @@ "react",
   ],
+  "release": {
+    "branches": [
+      "main",
+      {
+        "name": "beta",
+        "prerelease": true
+      }
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      "@semantic-release/github"
+    ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,json,css,md,ts,tsx}": [
+      "biome check --apply --no-errors-on-unmatched --files-ignore-unknown=true"
+    ]
+  },
+  "size-limit": [
+    {
+      "path": "dist/index.mjs",
+      "name": "InView",
+      "import": "{ InView }",
+      "limit": "1.8 kB"
+    },
+    {
+      "path": "dist/index.mjs",
+      "name": "useInView",
+      "import": "{ useInView }",
+      "limit": "1.3 kB"
+    },
+    {
+      "path": "dist/index.mjs",
+      "name": "observe",
+      "import": "{ observe }",
+      "limit": "1 kB"
+    }
+  ],
   "peerDependencies": {
@@ -47,2 +109,22 @@ "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
   },
+  "devDependencies": {
+    "@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/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "jsdom": "^24.1.0",
+    "lint-staged": "^15.2.7",
+    "microbundle": "^0.15.1",
+    "npm-run-all": "^4.1.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "simple-git-hooks": "^2.11.1",
+    "size-limit": "^11.1.4",
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.3",
+    "vitest": "^1.6.0"
+  },
   "peerDependenciesMeta": {
@@ -49,0 +131,0 @@ "react-dom": {

README.md

@@ -126,3 +126,4 @@ # react-intersection-observer
 
-> **Note**<br> When rendering a plain child, make sure you keep your HTML output
+> [!NOTE]
+> When rendering a plain child, make sure you keep your HTML output
 > semantic. Change the `as` to match the context, and add a `className` to style
@@ -142,3 +143,3 @@ > the `<InView />`. The component does not support Ref Forwarding, so if you
 | **root**               | `Element`                 | `document`  | The Intersection Observer interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is `null`, then the bounds of the actual document viewport are used.  |
-| **rootMargin**         | `string`                  | `'0px'`     | Margin around the root. Can have values similar to the CSS margin property, e.g. `"10px 20px 30px 40px"` (top, right, bottom, left). Also supports percentages, to check if an element intersects with the center of the viewport for example `"-50% 0% -50% 0%"`.                                |
+| **rootMargin**         | `string`                  | `'0px'`     | Margin around the root. Can have values similar to the CSS margin property, e.g. `"10px 20px 30px 40px"` (top, right, bottom, left). Also supports percentages, to check if an element intersects with the center of the viewport for example `"-50% 0% -50% 0%"`.                              |
 | **threshold**          | `number` or `number[]`    | `0`         | Number between `0` and `1` indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                                                                                              |
@@ -196,3 +197,3 @@ | **onChange**           | `(inView, entry) => void` | `undefined` | Call this function whenever the in view state changes. It will receive the `inView` boolean, alongside the current `IntersectionObserverEntry`.                                                                                                                                                 |
 - [Track impressions](docs/Recipes.md#track-impressions) _(Google Analytics, Tag
-  Manager, etc)_
+  Manager, etc.)_
 
@@ -444,3 +445,3 @@ ## FAQ
 [polyfill](https://www.npmjs.com/package/intersection-observer) directly or use
-a service like [polyfill.io](https://polyfill.io/v2/docs/) to add it when
+a service like [https://cdnjs.cloudflare.com/polyfill](https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js) to add it when
 needed.
@@ -496,3 +497,4 @@
 
-> **Warning**<br> You most likely won't need this, but it can be useful if you
+> [!IMPORTANT]
+> You most likely won't need this, but it can be useful if you
 > need to handle IntersectionObservers outside React, or need full control over
@@ -499,0 +501,0 @@ > how instances are created.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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

149493

increased by1.59%

Number of lines in readme file

509

increased by0.39%

Worsened metrics

Dev dependency count

18

increased byInfinity%

Lines of code

1445

decreased by-1.63%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes