react-intersection-observer - npm Package Compare versions

Comparing version 9.6.0 to 9.7.0

esm/index.js

@@ -37,3 +37,3 @@ "use client";
 function createObserver(options) {
-  let id = optionsToId(options);
+  const id = optionsToId(options);
   let instance = observerMap.get(id);
@@ -81,3 +81,3 @@ if (!instance) {
   const { id, observer, elements } = createObserver(options);
-  let callbacks = elements.get(element) || [];
+  const callbacks = elements.get(element) || [];
   if (!elements.has(element)) {
@@ -271,3 +271,2 @@ elements.set(element, callbacks);
       // If the threshold is an array, convert it to a string, so it won't change between renders.
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       Array.isArray(threshold) ? threshold.toString() : threshold,
@@ -274,0 +273,0 @@ ref,

index.d.ts

@@ -57,2 +57,4 @@ import * as React from 'react';
 declare class InView extends React.Component<IntersectionObserverProps | PlainChildrenProps, State> {
+    node: Element | null;
+    _unobserveCb: (() => void) | null;
     constructor(props: IntersectionObserverProps | PlainChildrenProps);
@@ -62,4 +64,2 @@ componentDidMount(): void;
     componentWillUnmount(): void;
-    node: Element | null;
-    _unobserveCb: (() => void) | null;
     observeNode(): void;
@@ -168,3 +168,3 @@ unobserve(): void;
     onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void;
-} & Omit<React.HTMLProps<HTMLElement>, 'onChange'>;
+} & Omit<React.HTMLProps<HTMLElement>, "onChange">;
 /**
@@ -171,0 +171,0 @@ * The Hook response supports both array and object destructing

index.js

@@ -74,3 +74,3 @@ "use strict";
 function createObserver(options) {
-  let id = optionsToId(options);
+  const id = optionsToId(options);
   let instance = observerMap.get(id);
@@ -118,3 +118,3 @@ if (!instance) {
   const { id, observer, elements } = createObserver(options);
-  let callbacks = elements.get(element) || [];
+  const callbacks = elements.get(element) || [];
   if (!elements.has(element)) {
@@ -308,3 +308,2 @@ elements.set(element, callbacks);
       // If the threshold is an array, convert it to a string, so it won't change between renders.
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       Array.isArray(threshold) ? threshold.toString() : threshold,
@@ -311,0 +310,0 @@ ref,

package.json

 {
   "name": "react-intersection-observer",
-  "version": "9.6.0",
+  "version": "9.7.0",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
@@ -39,42 +39,2 @@ "source": "./src/index.tsx",
   ],
-  "release": {
-    "branches": [
-      "main",
-      {
-        "name": "beta",
-        "prerelease": true
-      }
-    ],
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      [
-        "@semantic-release/npm",
-        {
-          "pkgRoot": "dist"
-        }
-      ],
-      "@semantic-release/github"
-    ]
-  },
-  "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": {
@@ -92,3 +52,4 @@ "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
       "allowedVersions": {
-        "react": "18"
+        "react": "18",
+        "vite": "5"
       }
@@ -95,0 +56,0 @@ },

README.md

@@ -152,3 +152,3 @@ # react-intersection-observer
 | Name                   | Type                      | Default     | Description                                                                                                                                                                                                                                                                                     |
-| ---------------------- | ------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|------------------------|---------------------------|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | **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.  |
@@ -170,4 +170,4 @@ | **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).                                                                                                                                                            |
 | Name         | Type                                                 | Default     | Description                                                                                                                                                                                                                                                                                                                    |
-| ------------ | ---------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **as**       | `IntrinsicElement`                                   | `'div'`     | Render the wrapping element as this element. Defaults to `div`. If you want to use a custom component, please use the `useInView` hook or a render prop instead to manage the reference explictly.                                                                                                                                              |
+|--------------|------------------------------------------------------|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **as**       | `IntrinsicElement`                                   | `'div'`     | Render the wrapping element as this element. Defaults to `div`. If you want to use a custom component, please use the `useInView` hook or a render prop instead to manage the reference explictly.                                                                                                                             |
 | **children** | `({ref, inView, entry}) => ReactNode` or `ReactNode` | `undefined` | Children expects a function that receives an object containing the `inView` boolean and a `ref` that should be assigned to the element root. Alternatively pass a plain child, to have the `<InView />` deal with the wrapping element. You will also get the `IntersectionObserverEntry` as `entry`, giving you more details. |
@@ -264,3 +264,3 @@
 | Method                                        | Description                                                                                                                                                                       |
-| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|-----------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `mockAllIsIntersecting(isIntersecting)`       | Set `isIntersecting` on all current Intersection Observer instances. The value of `isIntersecting` should be either a `boolean` or a threshold between 0 and 1.                   |
@@ -366,3 +366,3 @@ | `mockIsIntersecting(element, isIntersecting)` | Set `isIntersecting` for the Intersection Observer of a specific `element`. The value of `isIntersecting` should be either a `boolean` or a threshold between 0 and 1.            |
 test('should create a hook inView', () => {
-  render(<HookComponent />);
+  render(<HookComponent/>);
 
@@ -375,3 +375,3 @@ // This causes all (existing) IntersectionObservers to be set as intersecting
 test('should create a hook inView with threshold', () => {
-  render(<HookComponent options={{ threshold: 0.3 }} />);
+  render(<HookComponent options={{ threshold: 0.3 }}/>);
 
@@ -387,3 +387,3 @@ mockAllIsIntersecting(0.1);
 test('should mock intersecing on specific hook', () => {
-  render(<HookComponent />);
+  render(<HookComponent/>);
   const wrapper = screen.getByTestId('wrapper');
@@ -397,3 +397,3 @@
 test('should create a hook and call observe', () => {
-  const { getByTestId } = render(<HookComponent />);
+  const { getByTestId } = render(<HookComponent/>);
   const wrapper = getByTestId('wrapper');
@@ -433,2 +433,3 @@ // Access the `IntersectionObserver` instance for the wrapper Element.
 import { defaultFallbackInView } from 'react-intersection-observer';
+
 defaultFallbackInView(true); // or 'false'
@@ -499,2 +500,3 @@ ```
 import { observe } from 'react-intersection-observer';
+
 const destroy = observe(element, callback, options);
@@ -504,3 +506,3 @@ ```
 | Name         | Type                       | Required | Description                                                |
-| ------------ | -------------------------- | -------- | ---------------------------------------------------------- |
+|--------------|----------------------------|----------|------------------------------------------------------------|
 | **element**  | `Element`                  | true     | DOM element to observe                                     |
@@ -518,17 +520,27 @@ | **callback** | `ObserverInstanceCallback` | true     | The callback function that Intersection Observer will call |
 [package-url]: https://npmjs.org/package/react-intersection-observer
+
 [npm-version-svg]: https://img.shields.io/npm/v/react-intersection-observer.svg
+
 [npm-minzip-svg]:
-  https://img.shields.io/bundlephobia/minzip/react-intersection-observer.svg
+https://img.shields.io/bundlephobia/minzip/react-intersection-observer.svg
+
 [bundlephobia-url]:
-  https://bundlephobia.com/result?p=react-intersection-observer
+https://bundlephobia.com/result?p=react-intersection-observer
+
 [license-image]: http://img.shields.io/npm/l/react-intersection-observer.svg
+
 [license-url]: LICENSE
+
 [downloads-image]: http://img.shields.io/npm/dm/react-intersection-observer.svg
+
 [downloads-url]:
-  http://npm-stat.com/charts.html?package=react-intersection-observer
+http://npm-stat.com/charts.html?package=react-intersection-observer
+
 [test-image]:
-  https://github.com/thebuilder/react-intersection-observer/workflows/Test/badge.svg
+https://github.com/thebuilder/react-intersection-observer/workflows/Test/badge.svg
+
 [test-url]:
-  https://github.com/thebuilder/react-intersection-observer/actions?query=workflow%3ATest
+https://github.com/thebuilder/react-intersection-observer/actions?query=workflow%3ATest
+
 [test-utils-url]:
-  https://github.com/thebuilder/react-intersection-observer/blob/master/src/test-utils.ts
+https://github.com/thebuilder/react-intersection-observer/blob/master/src/test-utils.ts

test-utils.js

@@ -8,8 +8,8 @@ "use strict";
 // If we are running in a valid testing environment, we can mock the IntersectionObserver.
-if (typeof beforeEach !== 'undefined' && typeof afterEach !== 'undefined') {
+if (typeof beforeEach !== "undefined" && typeof afterEach !== "undefined") {
     beforeEach(() => {
         // Use the exposed mock function. Currently, only supports Jest (`jest.fn`) and Vitest with globals (`vi.fn`).
-        if (typeof jest !== 'undefined')
+        if (typeof jest !== "undefined")
             setupIntersectionMocking(jest.fn);
-        else if (typeof vi !== 'undefined') {
+        else if (typeof vi !== "undefined") {
             // Cast the `vi.fn` to `jest.fn` - The returned `Mock` type has a different signature than `jest.fn`
@@ -59,3 +59,3 @@ setupIntersectionMocking(vi.fn);
             root: (_b = options.root) !== null && _b !== void 0 ? _b : null,
-            rootMargin: (_c = options.rootMargin) !== null && _c !== void 0 ? _c : '',
+            rootMargin: (_c = options.rootMargin) !== null && _c !== void 0 ? _c : "",
             observe: mockFn((element) => {
@@ -89,8 +89,9 @@ item.elements.add(element);
 function triggerIntersection(elements, trigger, observer, item) {
+    var _a;
     const entries = [];
-    const isIntersecting = typeof trigger === 'number'
+    const isIntersecting = typeof trigger === "number"
         ? observer.thresholds.some((threshold) => trigger >= threshold)
         : trigger;
     let ratio;
-    if (typeof trigger === 'number') {
+    if (typeof trigger === "number") {
         const intersectedThresholds = observer.thresholds.filter((threshold) => trigger >= threshold);
@@ -105,4 +106,3 @@ ratio =
     }
-    elements.forEach((element) => {
-        var _a;
+    for (const element of elements) {
         entries.push({
@@ -131,3 +131,3 @@ boundingClientRect: element.getBoundingClientRect(),
         });
-    });
+    }
     // Trigger the IntersectionObserver callback with all the entries
@@ -145,3 +145,3 @@ if (test_utils_1.act)
     warnOnMissingSetup();
-    for (let [observer, item] of observers) {
+    for (const [observer, item] of observers) {
         triggerIntersection(Array.from(item.elements), isIntersecting, observer, item);
@@ -161,3 +161,3 @@ }
     if (!observer) {
-        throw new Error('No IntersectionObserver instance found for element. Is it still mounted in the DOM?');
+        throw new Error("No IntersectionObserver instance found for element. Is it still mounted in the DOM?");
     }
@@ -179,3 +179,3 @@ const item = observers.get(observer);
     warnOnMissingSetup();
-    for (let [observer, item] of observers) {
+    for (const [observer, item] of observers) {
         if (item.elements.has(element)) {
@@ -185,4 +185,4 @@ return observer;
     }
-    throw new Error('Failed to find IntersectionObserver for element. Is it being observed?');
+    throw new Error("Failed to find IntersectionObserver for element. Is it being observed?");
 }
 exports.intersectionMockInstance = intersectionMockInstance;

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

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

Number of lines in readme file

536

increased by2.29%

Worsened metrics

Total package byte prevSize

141256

decreased by-0.21%

Lines of code

1297

decreased by-0.23%

No dependency changes