NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #4196 most downloaded on npm
Monitor if a component is inside the viewport, using IntersectionObserver API
Last release 1 months ago
26 Aug 2026
Release timing varies
gaps range from 2 weeks to 8 months
Nearly every release is documented
notes for 60 of the last 60 stable releases
Nothing withdrawn
no release was ever pulled
9 years old
171 releases · first in 2017
Fix docs callouts and logo theming by @thebuilder in #776
Full Changelog: v11.0.0...v11.0.1
One column per quarter.
Smaller improvements include private vulnerability reporting, stronger PR quality checks with Fallow, dependency updates, and expanded observer lifecy…
v11 delivers a ground-up observer lifecycle rewrite, making observation and cleanup more resilient across React 17, 18, and 19. Shared callback-ref handling, idempotent cleanup, and improved threshold behavior make hooks more predictable in real-world mounting and unmounting scenarios.
It also introduces a new Blume-powered documentation site with clearer guides and examples.
Storybook and the README have been refreshed to make getting started easier.
Smaller improvements include private vulnerability reporting, stronger PR quality checks with Fallow, dependency updates, and expanded observer lifecycle tests.
Full Changelog: v10.1.0...v11.0.0
chore: update github actions by @thebuilder in #754
scrollMargin option for intersection observers by @thebuilder in #753Full Changelog: v10.0.3...v10.1.0
prevent callback skipping with triggerOnce and merged refs by @djk01281 in #747
Add npm package size badge to README by @jantimon in #740
Full Changelog: v10.0.0...v10.0.2
Based on the great work in #718 by @jantimon - This release adds the new useOnInView hook.
Based on the great work in #718 by @jantimon - This release adds the new useOnInView hook.
useOnInView hook — a no-re-render alternative to useInView that delivers (inView, entry) to your callback while returning a ref you can attach to any element. Designed for tracking, analytics, and other side effect heavy workloads where state updates are unnecessary.IntersectionChangeEffect / IntersectionEffectOptions types — exported helper types that describe the new hook’s callback and options surface.useOnInView.useInView, useOnInView, and <InView> now ignore the browser’s initial inView === false emission for onChange events, so handlers only fire once a real visibility change occurs, while still reporting all subsequent enter/leave transitions.useOnInView, covering thresholds, triggerOnce, skip toggling, merged refs, and multiple observers on the same node.Full Changelog: v9.16.0...v10.0.0
ci: drop semantic release flow by @thebuilder in #719
Full Changelog: v9.15.1...v9.16.0
Fixes and improvements to react-intersection-observer/test-utils
restore beforeEach in test utils
ensure browser environment in test-utils
Drop support for React 15/16. The types are no longer compatible with later version of React, since they have dropped the deprecated types.
align IntersectionObserver options with DOM API
fix package exports and simplify build (#695) (c9cef8f) - All thanks go to @RobinTail
Add basic browser mode test, that runs with an unmocked IntersectionObserver
remove script to publish dist dir
test-utils - execute mockClear method only when it exists
## 9.10.2 (2024-05-03) ### Bug Fixes * support old act from react-dom
use act from react instead of deprecated one
replace codesandbox with stackblitz
replace codesandbox with stackblitz
test utils, only use act when in an act environment
include "type": "commonjs" in package.json
# 9.8.0 (2024-02-09) ### Features * export .mts for test-utils
This release switches from ESLint and Prettier to Biome.js, as a way of cutting down on dev dependencies and configuration.
add react-dom as a peer dependency
## 9.5.4 (2024-01-31) ### Bug Fixes * export .d.mts file for types
add componentDidMount to InView (5da81d2), closes #649
## 9.5.2 (2023-06-28) ### Bug Fixes * target es2018
## 9.5.1 (2023-06-20) ### Bug Fixes * improve bundle output (b24d9b2) * output legacy esm
This release switches the build tool to tsup, in order for the package to support the use client directive. Hopefully it shouldn't have an impact on u
This release switches the build tool to tsup, in order for the package to support the use client directive. Hopefully it shouldn't have an impact on usage, but changing build output, always carries a slight risk of some tooling breaking.
# 9.5.0-beta.2 (2023-06-17) ### Features * support "use client" with tsup
# 9.5.0-beta.1 (2023-06-15) ### Features * switch to tsup build
correct the error message that happens if IntersectionObserver is not mocked
## 9.4.3 (2023-02-23) ### Bug Fixes * restrict type on the "as" prop
remove extra useEffect used for resetting initial state
cannot access 'unobserve' before initialization #587
This release fixes https://github.com/thebuilder/react-intersection-observer/issues/572 It's now possible (not recommended) to use inline functions fo
This release fixes https://github.com/thebuilder/react-intersection-observer/issues/572
It's now possible (not recommended) to use inline functions for ref methods. This will still cause extra rerenders, but you will not get into a state of infinite loops.
ref (776caa6)Add support for TS 4.7+ node16/next module
## 9.3.4 (2022-06-23) ### Bug Fixes * export module as esm.js
## 9.3.4-beta.2 (2022-06-20) ### Bug Fixes * correct the build
## 9.3.4-beta.1 (2022-06-20) ### Bug Fixes * add esm as fallback module
## 9.3.3 (2022-06-15) ### Bug Fixes * use the default field
## 9.3.2 (2022-06-15) ### Bug Fixes * correct the build copy (88058e1) * export paths with dot path
## 9.3.1 (2022-06-15) ### Bug Fixes * export the test utils
# 9.3.0 (2022-06-14) ### Features * refactor to use modern exports
# 9.3.0-beta.1 (2022-06-08) ### Features * refactor to use modern exports
## 9.2.2 (2022-06-02) ### Bug Fixes * correct broken module exports (12bad4a) * correct name in size limit (3d4534e) * revert the bundle changes
correct microbundle output paths
Switch to vitest and storybook vite
`js const { ref } = useInView({ onChange: (inView) => { if (inView) { dataLayer.push('Section shown'); // Here's a GTM dataLayer push } }, }); `
This release is mainly to fix an issue with the exports not being properly tree-shaken.
This release is mainly to fix an issue with the exports not being properly tree-shaken.
After tree shaking, this is the current size impact of the exports, as reported by size-limit.
InView - 1.6 kB with all dependencies, minified and gzippeduseInView - 1.13 kB with all dependencies, minified and gzippedobserve - 835 B with all dependencies, minified and gzippeddefault export of the InView component. Use the named InView import instead-import InView from 'react-intersection-observer
+import { InView } from 'react-intersection-observer
remove static props from InView to fix tree shaking
# 9.0.0-beta.2 (2022-04-21) ### Bug Fixes * be specific with import type
Can no longer do the default import of InView.
This removes the old tag prop from , that was deprecated by as some years ago. If you haven't changed it, this could break your build. The fix would b…
tag prop from <InView>, that was deprecated by as some years ago. If you haven't changed it, this could break your build. The fix would be to replace all instances of tag with as.as from the old ReactType to ElementType. This would only be a problem if you are still using the old version of the React Types.## 8.33.1 (2021-12-15) ### Bug Fixes * Update test-utils.ts
add support for fallbackInView (#521) (aa50422) - Closes #495
This is solution for #495 that adds support for a fallbackInView value.
You can set the fallback globally:
import { defaultFallbackInView } from 'react-intersection-observer';
defaultFallbackInView(true); // or 'false'
You can also define the fallback locally on useInView or <InView> as an
option. This will override the global fallback value.
import React from 'react';
import { useInView } from 'react-intersection-observer';
const Component = () => {
const { ref, inView, entry } = useInView({
fallbackInView: true,
});
return (
<div ref={ref}>
<h2>{`Header inside viewport ${inView}.`}</h2>
</div>
);
};
## 8.32.5 (2021-11-25) ### Bug Fixes * undo the clear observers
correct import path for observermap
clear observers after each test run
Your coding agent can read these notes before it upgrades. Set up the MCP server →