react-intersection-observer - npm Package Compare versions -...

@@ -15,5 +15,2 @@ # react-intersection-observer

**Storybook Demo:**

[https://react-intersection-observer.vercel.app](https://react-intersection-observer.vercel.app)

## Features

@@ -34,13 +31,9 @@

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/thebuilder/react-intersection-observer)

## Installation

Install using [Yarn](https://yarnpkg.com):

Install the package with your package manager of choice:

```sh

yarn add react-intersection-observer

```

or NPM:

```sh

npm install react-intersection-observer --save

@@ -70,4 +63,4 @@ ```

```jsx

import React from 'react';

import { useInView } from 'react-intersection-observer';

import React from "react";

import { useInView } from "react-intersection-observer";

@@ -88,4 +81,2 @@ const Component = () => {

[![Edit useInView](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/useinview-ud2vo?fontsize=14&hidenavigation=1&theme=dark)

### Render props

@@ -105,3 +96,3 @@

```jsx

import { InView } from 'react-intersection-observer';

import { InView } from "react-intersection-observer";

@@ -121,4 +112,2 @@ const Component = () => (

[![Edit InView render props](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/inview-render-props-hvhcb?fontsize=14&hidenavigation=1&theme=dark)

### Plain children

@@ -132,6 +121,6 @@

```jsx

import { InView } from 'react-intersection-observer';

import { InView } from "react-intersection-observer";

const Component = () => (

<InView as="div" onChange={(inView, entry) => console.log('Inview:', inView)}>

<InView as="div" onChange={(inView, entry) => console.log("Inview:", inView)}>

<h2>Plain children are always rendered. Use onChange to monitor state.</h2>

@@ -144,4 +133,2 @@ </InView>

[![Edit InView plain children](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/inview-plain-children-vv51y?fontsize=14&hidenavigation=1&theme=dark)

> **Note**<br> When rendering a plain child, make sure you keep your HTML output

@@ -160,5 +147,5 @@ > semantic. Change the `as` to match the context, and add a `className` to style

|------------------------|---------------------------|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

| ---------------------- | ------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| **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%". |

| **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. |

@@ -178,3 +165,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`. |

|--------------|------------------------------------------------------|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

| ------------ | ---------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

| **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. |

@@ -226,4 +213,4 @@ | **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. |

```jsx

import React, { useRef, useCallback } from 'react';

import { useInView } from 'react-intersection-observer';

import React, { useRef, useCallback } from "react";

import { useInView } from "react-intersection-observer";

@@ -273,3 +260,3 @@ function Component(props) {

| 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. |

@@ -300,7 +287,7 @@ | `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. |

```js

import { vi, beforeEach, afterEach } from 'vitest';

import { vi, beforeEach, afterEach } from "vitest";

import {

setupIntersectionMocking,

resetIntersectionMocking,

} from 'react-intersection-observer/test-utils';

} from "react-intersection-observer/test-utils";

@@ -337,3 +324,3 @@ beforeEach(() => {

```js

import { defaultFallbackInView } from 'react-intersection-observer';

import { defaultFallbackInView } from "react-intersection-observer";

@@ -351,3 +338,3 @@ defaultFallbackInView(true); // or `false` - whichever consistent behavior makes the most sense for your use case.

module.exports = {

setupFilesAfterEnv: ['react-intersection-observer/test-utils'],

setupFilesAfterEnv: ["react-intersection-observer/test-utils"],

};

@@ -359,5 +346,5 @@ ```

```js

import React from 'react';

import { screen, render } from '@testing-library/react';

import { useInView } from 'react-intersection-observer';

import React from "react";

import { screen, render } from "@testing-library/react";

import { useInView } from "react-intersection-observer";

import {

@@ -367,3 +354,3 @@ mockAllIsIntersecting,

intersectionMockInstance,

} from 'react-intersection-observer/test-utils';

} from "react-intersection-observer/test-utils";

@@ -379,33 +366,33 @@ const HookComponent = ({ options }) => {

test('should create a hook inView', () => {

render(<HookComponent/>);

test("should create a hook inView", () => {

render(<HookComponent />);

// This causes all (existing) IntersectionObservers to be set as intersecting

mockAllIsIntersecting(true);

screen.getByText('true');

screen.getByText("true");

});

test('should create a hook inView with threshold', () => {

render(<HookComponent options={{ threshold: 0.3 }}/>);

test("should create a hook inView with threshold", () => {

render(<HookComponent options={{ threshold: 0.3 }} />);

mockAllIsIntersecting(0.1);

screen.getByText('false');

screen.getByText("false");

// Once the threshold has been passed, it will trigger inView.

mockAllIsIntersecting(0.3);

screen.getByText('true');

screen.getByText("true");

});

test('should mock intersecing on specific hook', () => {

render(<HookComponent/>);

const wrapper = screen.getByTestId('wrapper');

test("should mock intersecing on specific hook", () => {

render(<HookComponent />);

const wrapper = screen.getByTestId("wrapper");

// Set the intersection state on the wrapper.

mockIsIntersecting(wrapper, 0.5);

screen.getByText('true');

screen.getByText("true");

});

test('should create a hook and call observe', () => {

const { getByTestId } = render(<HookComponent/>);

const wrapper = getByTestId('wrapper');

test("should create a hook and call observe", () => {

const { getByTestId } = render(<HookComponent />);

const wrapper = getByTestId("wrapper");

// Access the `IntersectionObserver` instance for the wrapper Element.

@@ -443,3 +430,3 @@ const instance = intersectionMockInstance(wrapper);

```js

import { defaultFallbackInView } from 'react-intersection-observer';

import { defaultFallbackInView } from "react-intersection-observer";

@@ -453,4 +440,4 @@ defaultFallbackInView(true); // or 'false'

```jsx

import React from 'react';

import { useInView } from 'react-intersection-observer';

import React from "react";

import { useInView } from "react-intersection-observer";

@@ -484,3 +471,3 @@ const Component = () => {

```js

import 'intersection-observer';

import "intersection-observer";

```

@@ -498,4 +485,4 @@

async function loadPolyfills() {

if (typeof window.IntersectionObserver === 'undefined') {

await import('intersection-observer');

if (typeof window.IntersectionObserver === "undefined") {

await import("intersection-observer");

}

@@ -513,3 +500,3 @@ }

```js

import { observe } from 'react-intersection-observer';

import { observe } from "react-intersection-observer";

@@ -520,3 +507,3 @@ const destroy = observe(element, callback, options);

|--------------|----------------------------|----------|------------------------------------------------------------|

| ------------ | -------------------------- | -------- | ---------------------------------------------------------- |

[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

[bundlephobia-url]:

https://bundlephobia.com/result?p=react-intersection-observer

[npm-minzip-svg]: https://img.shields.io/bundlephobia/minzip/react-intersection-observer.svg

[bundlephobia-url]: 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

[test-image]:

https://github.com/thebuilder/react-intersection-observer/workflows/Test/badge.svg

[test-url]:

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

[downloads-url]: http://npm-stat.com/charts.html?package=react-intersection-observer

[test-image]: https://github.com/thebuilder/react-intersection-observer/workflows/Test/badge.svg

[test-url]: 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

		{
		"name": "react-intersection-observer",
		"version": "9.8.2",
		"version": "9.9.0",
		"description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
		@@ -5,0 +5,0 @@ "type": "commonjs",

react-intersection-observer - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics