npmpackage.info

Gathering detailed insights and metrics for @shopify/react-intersection-observer

@shopify/react-intersection-observer - 4.1.0 | npmpackage.info

@shopify/react-intersection-observer

[⚠️ Deprecated] A loosely related set of packages for JavaScript/TypeScript projects at Shopify

4.1.0

1,692

MIT

TypeScript

919.00 B

15,375,381 5.7

Installations

npm install @shopify/react-intersection-observer

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Min. Node Version

>=18.12.0

Node Version

18.20.3

NPM Version

10.7.0 Score

96.6

Supply Chain

Quality

82.4

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

2,083

Closed

387

Merged

1,696

Issues

Open

128

Total

724

Closed

596

Releases

823

@shopify/react-i18n-universal-provider@3.1.8

Updated on Jan 10, 2025

@shopify/react-i18n@7.14.0

Updated on Jan 10, 2025

@shopify/name@1.3.0

Updated on Jan 10, 2025

@shopify/dates@2.1.1

Updated on Jan 10, 2025

@shopify/react-i18n-universal-provider@3.1.7

Updated on Jan 10, 2025

@shopify/react-i18n@7.13.2

Updated on Jan 10, 2025

View All 823 releases

Languages

TypeScript

Ruby

JavaScript

Shell

CSS

Handlebars

Procfile

TypeScript (96.39%)

Ruby (2.34%)

JavaScript (1.23%)

Shell (0.02%)

CSS (0.02%)

Developer

Shopify

Download Statistics

Total Downloads

15,375,381

Last Day

122

Last Week

6,647

Last Month

33,376

Last Year

1,255,045

GitHub Statistics

MIT License

1,692 Stars

4,974 Commits

226 Forks

386 Watchers

249 Branches

7,205 Contributors

Updated on Jun 04, 2025

Bundle Size

2.21 kB

Minified

919.00 B

Minified + Gzipped

Bundlephobia

Maintainers

View All 7,205 Contributors

Package Meta Information

Latest Version

4.1.0

Package Id

@shopify/react-intersection-observer@4.1.0

Unpacked Size

22.52 kB

Size

5.36 kB

File Count

NPM Version

10.7.0

Node Version

18.20.3

Published on

Jun 10, 2024

Total Downloads

Cumulative downloads

Total Downloads

15,375,381

Peer Dependencies

react

Dev Dependencies

@shopify/jest-dom-mocks @shopify/react-testing

`@shopify/react-intersection-observer`

A React wrapper around the Intersection Observer API.

Installation

1yarn add @shopify/react-intersection-observer

Usage

`useIntersection(options: Options)`

The useIntersection hook takes in IntersectionObserver options, and returns a tuple of:

The state of the observer.
An object that you can pass as a ref to the DOM element you wish to track.

1function MyComponent() {
2  const [intersection, intersectionRef] = useIntersection();
3
4  return (
5    <div ref={intersectionRef}>Intersection: {intersection.isIntersecting}</div>
6  );
7}

You can pass additional options to this hook that are used to create the underlying IntersectionObserver:

threshold: a number or array of number indicating the intersectionRatio that must be met before the observer is triggered.
root: a string or element that is used as the viewport for visibility testing. If a string is passed, it will be treated as a selector.
rootMargin: a string representing the margins by which to shrink the root’s bounding box before computing intersections.

`<IntersectionObserver />`

This package also exports an IntersectionObserver component, which is a fairly minimal component wrapper around the useIntersection hook, and accepts the same threshold, root, and rootMargin values as props. The onIntersectionChange prop you pass to this component will be called with an IntersectionObserverEntry object, which describes the state of the intersection (and is equivalent to the first value of the tuple returned from the hook).

Unlike the useIntersection hook, this component will create its own DOM node that will be observed, rather than requiring you to pass a ref to a DOM node you already control. You can customize the rendered markup by passing either of the following props:

children, which will be rendered inside of the node being observed for intersections.
wrapperComponent, which changes the DOM node being wrapped around those children (defaults to a div).

1<div ref={this.parentElement}>
2  <IntersectionObserver
3    root={this.parentElement.current}
4    rootMargin="10px 10%"
5    threshold={1}
6    onIntersectionChange={(entry) =>
7      console.log('intersectionRatio > 0', entry)
8    }
9    onNotIntersecting={(entry) => console.log('intersectionRatio = 0', entry)}
10  />
11</div>

Lifecycle

When useIntersection is passed new options (or, when IntersectionObserver receives new props), this library will do the minimum amount of work to unobserve/ re-observe with the new fields. The most expensive updates to make are changing threshold, root, rootMargin, and, in the case of the component version, wrapperComponent, as these require disconnecting the old observer and recreating a new one.

When a component consuming the useIntersection hook is unmounted, the intersection observer is disconnected. The same applies if you unmount an IntersectionObserver component.

Browser support

To polyfill IntersectionObserver, please use the @shopify/polyfills/intersection-observer package.

If you do not polyfill the feature and it is not supported in the current browser, the useIntersection hook and the IntersectionObserver component will decide what to do based on the unsupportedBehavior option. This value should be a member of the UnsupportedBehavior enum (exported from this package). Currently, there are two options:

UnsupportedBehavior.TreatAsIntersecting: immediately sets state/ calls onIntersectionChange on mount with a non-0 intersectionRatio (this is the default).
UnsupportedBehavior.Ignore: never calls marks the intersection observer as being intersecting.

No vulnerabilities found.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

Maintained

Determines if the project is "actively maintained".

10

License

Determines if the project has defined a license.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

Security-Policy

Determines if the project has published a security policy.

2

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/changelog.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/changelog.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/changelog.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/changelog.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/cla.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/cla.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/node-ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/node-ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/node-ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ruby-ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/ruby-ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ruby-ci.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/ruby-ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/snapit.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/snapit.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/snapit.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/Shopify/quilt/snapit.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/node-ci.yml:50
Warn: npmCommand not pinned by hash: .github/workflows/release.yml:28
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned
Info: 0 out of 2 npmCommand dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

5.7

/10

Last Scanned on 2024-07-01

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@shopify/react-intersection-observer

Installations

Developer Guide

Yes

CommonJS, ESM

>=18.12.0

18.20.3

10.7.0

Score

Pull Requests

0

2,083

387

1,696

Issues

128

724

596

Releases

Languages

Developer

Shopify

Download Statistics

GitHub Statistics

Bundle Size

2.21 kB

919.00 B

Maintainers

Package Meta Information

Total Downloads

15,375,381

Peer Dependencies

Dev Dependencies

@shopify/react-intersection-observer

Installation

Usage

useIntersection(options: Options)

<IntersectionObserver />

Lifecycle

Browser support

10

10

10

10

10

9

2

0

0

0

0

0

5.7

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads

`@shopify/react-intersection-observer`

`useIntersection(options: Options)`

`<IntersectionObserver />`