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 23 days 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
make ratio return largest threshold smaller than trigger
One column per quarter.
export the observe method (#473) (650e513), closes #402
use WeakMap to avoid memory leak (#463) (47bad43), closes #462
add support for testing threshold values
ensure threshold fallbacks to options value if undefined
ensure thresholds is defined (#415) (76405d7), closes #414
ensure undefined values are filtered from id
use beforeEach instead of beforeAll
## 8.29.1 (2020-10-19) ### Bug Fixes * stringify array thresholds
# 8.29.0 (2020-09-28) ### Features * support initialInView
## 8.28.6 (2020-09-24) ### Bug Fixes * optimize InView
Detect inView if threshold is 1, closes #387
## 8.28.4 (2020-09-10) ### Bug Fixes * optimize observers code
check intersectionRatio in addition to isIntersecting
add back default export for InView
There was an issue with the CJS and UMD files generated by microbundle, not matching filename in package.json
package.jsonBreaking change: Remove default export for the InView component
This is a rewrite of the internal handling of IntersectionObservers, alongside general refactoring and alignment of the code.
The new v2 implementation of IntersectionObserver extends the original API, so you can track if the element is covered by another element or has filters applied to it. Useful for blocking clickjacking attempts or tracking ad exposure.
To use it, you'll need to add the new trackVisibility and delay options.
When you get the entry back, you can then monitor if isVisible is true.
const TrackVisible = () => {
const { ref, entry } = useInView({ trackVisibility: true, delay: 100 });
return <div ref={ref}>{entry?.isVisible}</div>;
};
This is still a very new addition, so check
caniuse for current browser
support. If trackVisibility has been set, and the current browser doesn't
support it, a fallback has been added to always report isVisible as true.
It's not added to the TypeScript lib.d.ts file yet, so you will also have to
extend the IntersectionObserverEntry with the isVisible boolean.
add initial support for IntersectionObserver v2
# 8.28.0-beta.1 (2020-08-30) ### Features * rewrite internals and tests
shouldn't trigger onchange when skipping
# 8.27.0 (2020-08-19) ### Features * support skip option
don't clear the inView state if we get a node (#337) (d1e1495), closes #308
fix: the inView state could be reset with triggerOnce #311 (#312) a18d398
https://github.com/thebuilder/react-intersection-observer/compare/v8.26.0...v8.26.1
Fix inView not reset when ref removed #303 (#306) 0c450ce
https://github.com/thebuilder/react-intersection-observer/compare/v8.25.3...v8.26.0
chore: upgrade dependencies 14afafb
https://github.com/thebuilder/react-intersection-observer/compare/v8.25.2...v8.25.3
chore: upgrade dependencies 23b1d51
https://github.com/thebuilder/react-intersection-observer/compare/v8.25.1...v8.25.2
fix: move tiny-invariant to dependencies a6c965e
https://github.com/thebuilder/react-intersection-observer/compare/v8.25.0...v8.25.1
build: optimize the rollup build 3cadc06
https://github.com/thebuilder/react-intersection-observer/compare/v8.24.2...v8.25.0
fix: don't add onChange prop to the plain children container (#272) 4d88ea2
https://github.com/thebuilder/react-intersection-observer/compare/v8.24.1...v8.24.2
chore: upgrade dependencies 4734187
https://github.com/thebuilder/react-intersection-observer/compare/v8.23.1...v8.24.0
Nothing published for this version
Instead of publishing the entire project, it just publishes the content of the dist directory. This is only a breaking change, if you were importing f…
This release restructures how the project is published to npm. Instead of publishing the entire project, it just publishes the content of the dist directory.
This is only a breaking change, if you were importing files from the src or dist directory before.
If you do run into an issue with imports, it should be fixed by importing directly from react-intersection-observer.
Nothing published for this version
This release tweaks the Typescript typings for the PlainChildren version, so it should be more generic.
This release tweaks the Typescript typings for the PlainChildren version, so it should be more generic.
refactor: change the Map loop to forEach (#200) 831ca3a
https://github.com/thebuilder/react-intersection-observer/compare/v8.22.2...v8.22.3
Hooks were broken in last release - they would never trigger when they left the viewport. 😳
Hooks were broken in last release - they would never trigger when they left the viewport. 😳
https://github.com/thebuilder/react-intersection-observer/compare/v8.22.1...v8.22.2
This fixes #197 and allows you to actually import the file into Jest.
This fixes #197 and allows you to actually import the file into Jest.
Previously, the initial callback would trigger a state update, even if the element was still outside the viewport. This update changes the behavior, s
<InView>Previously, the initial callback would trigger a state update, even if the element was still outside the viewport.
This update changes the behavior, so it won't trigger new state update before the element enters the viewport.
If you used the IntersectionObserverEntry during that first callback, it will no longer work. The use case for this, is most likely to determine if the element started outside the viewport.
As a workaround, you can use the onChange callback, since this will still be called everytime.
Nothing published for this version
This releases is focused on helping you when writing tests.
This releases is focused on helping you when writing tests.
In order to write meaningful tests, the IntersectionObserver needs to be
mocked. If you are writing your tests in Jest, you can use the included
test-utils.js. It mocks the IntersectionObserver, and includes a few methods
to assist with faking the inView state.
test-utils.jsImport the methods from react-intersection-observer/test-utils.
mockAllIsIntersecting(isIntersecting:boolean)
Set the isIntersecting on all current IntersectionObserver instances.
mockIsIntersecting(element:Element, isIntersecting:boolean)
Set the isIntersecting for the IntersectionObserver of a specific element.
intersectionMockInstance(element:Element): IntersectionObserver
Call the intersectionMockInstance method with an element, to get the (mocked)
IntersectionObserver instance. You can use this to spy on the observe and
unobserve methods.
import React from 'react'
import { render } from 'react-testing-library'
import { useInView } from 'react-intersection-observer'
import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
const HookComponent = ({ options }) => {
const [ref, inView] = useInView(options)
return <div ref={ref}>{inView.toString()}</div>
}
test('should create a hook inView', () => {
const { getByText } = render(<HookComponent />)
mockAllIsIntersecting(true)
getByText('true')
})
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
So now that Hooks have been out in the wild for a week, a few issues are starting to pop up. Especially relating to how refs are handled (#162). To fi
So now that Hooks have been out in the wild for a week, a few issues are starting to pop up. Especially relating to how refs are handled (#162). To fix this, the current API needs to be changed.
useInView API:const [ref, inView, entry] = useInView(options)
If you are already using the hook, then you will need to update your code, by changing:
const Component = () => {
const ref = useRef()
const inView = useInView(ref, {
threshold: 0,
})
return (
<div ref={ref}>
...
</div>
)
}
Into:
const Component = () => {
const [ref, inView] = useInView({
threshold: 0,
})
return (
<div ref={ref}>
...
</div>
)
}
useIntersectionObserver hook was removed in favor of the useInView hook.Tests have been rewritten using react-testing-library. Before they were messing with the internals of the components to fake updates. It also just works with the new hooks.
Nothing published for this version
Nothing published for this version
The deprecated render method has been removed - Make sure you use children instead.
I decided to switch the project from Flow to TypeScript. This should ensure the TypeScript definitions match the actual implementation, without the need to manually sync the index.d.tsfile.
In the process, i've rewritten some of the internals, but it shouldn't affect the actual API.
A documentation site has also been created using docz: https://react-intersection-observer.now.sh
render method has been removed - Make sure you use children instead.intersectionRatio, you now get entry that contains the entire IntersectionObserverEntry element. If you're relying on intersectionRatio, you should change your code to entry.intersectionRatio.rootId has been removed - An idea for each unique root is now auto generated. This always felt like temporary solution, until i implemented a smarter way.Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
This release exposes the intersectionRatio, giving you a bit more insight into what triggered an update.
This release exposes the intersectionRatio, giving you a bit more insight into what triggered an update.
import { InView } from 'react-intersection-observer'
const Component = () => (
<InView>
{({ inView, ref, intersectionRatio }) => (
<div ref={ref}>
<h2>{`Header inside viewport ${inView} at ${intersectionRatio}`}</h2>
</div>
)}
</InView>
)
export default Component
See #123
Nothing published for this version
This release enables support for the useInView(ref, options) hook. The library will work fine with older versions of React, as long as you don't use t
This release enables support for the useInView(ref, options) hook. The library will work fine with older versions of React, as long as you don't use the execute the hook.
import { useRef } from 'react'
import { useInView } from 'react-intersection-observer'
const Component = () => {
const ref = useRef()
const inView = useInView(ref, {
/* Optional options */
threshold: 0,
})
return (
<div ref={ref}>
<h2>{`Header inside viewport ${inView}.`}</h2>
</div>
)
}
The release also refactors the Rollup build, which should result in a more optimized bundle.
Nothing published for this version
Nothing published for this version
Nothing published for this version
This release updates Babel and Rollup, and publishes the new output files.
This release updates Babel and Rollup, and publishes the new output files.
Your coding agent can read these notes before it upgrades. Set up the MCP server →