Detect if React component is in viewport
Home Page: https://roderickhsiao.github.io/react-in-viewport
License: MIT License
Hi, Roderick here. I'm a software architect based in San Francisco Bay Area.
Drop me a message if you want to discuss interesting web ideas, questions, or potentially fun project to work together :)
Open for tech talks invitations, project architecture consulting (web performance, large scale web app, team mentoring and more). Book your free discussion session with me at Calendly.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
There is an example with a manual usage of IntersectionObserver
const imageObserver = new IntersectionObserver((entries, imgObserver) => {
entries.forEach((entry) => {
if (entry.isIntersecting) { // important string
const lazyImage = entry.target
console.log("lazy loading ", lazyImage)
lazyImage.src = lazyImage.dataset.src
lazyImage.classList.remove("lzy_img");
imgObserver.unobserve(lazyImage); // important string
}
})
});
const arr = document.querySelectorAll('img.lzy_img')
arr.forEach((v) => {
imageObserver.observe(v);
})
In your library how can I make my component unobserve?
3.1.4 to 3.1.5.This version is covered by your current version range and after updating it in your project the build failed.
react-storybook-addon-chapters is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
devDependency @storybook/addon-actions was updated from 5.1.3 to 5.1.4.devDependency @storybook/react was updated from 5.1.3 to 5.1.4.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the storybook group definition.
storybook is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 18 commits.
6d3d4fa v5.1.409dd188 5.1.4 changelogd860e51 core-js 3 errors fix (#7051)248667e Merge pull request #7016 from ForbesLindesay/patch-209936b7 chore: set react version to 15.8.3 to match react native (#7008)169e9e4 FIX syntax highlighter plain text not visible (#7057)8bad7be Fix for issue 5932, adding default options to action(s) (#6438)7f253f5 Fixes typo in Introduction doc (#7059)d6944fa documentation: Add note to addon-backgrounds docs Readme. #6915 (#7026)f6fe014 Makes header consistent with sb.js.org (#7019)6472a04 Fixing Grammar (#7007)cd7b027 Fix grammar in index.md (#7001)6ded779 docs: Clarify how to get local example running (#6999)f64cff0 specifying where to get withInfo (#7013)257328b specifying where to get withInfoThere are 18 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
This could be a new feature altogether.
What I am looking for: I want to stop the intersection observer/callback from my component. I want to have programmatic start and stop with context/custom hook.
What currently happens: Currently on every scroll event intersection observer is triggered and is calling the callback function.
Here is one case:
Let's say we have layout of tabs and we are treating tab selection as a pointer to specific div element on page where we scroll to on click of tab.
On scroll of the page I can set tab's state but if I try to do programmatic scroll on page (i.e. on click of tab) it will trigger the intersection observer and in turn the callback.
To handle such situations we can introduce another local state and expose method that can update it (either true/false). Based on this new state we can decide whether to invoke the callback on intersection observer.
devDependency @babel/cli was updated from 7.5.5 to 7.6.0.devDependency @babel/core was updated from 7.5.5 to 7.6.0.devDependency @babel/plugin-proposal-class-properties was updated from 7.5.0 to 7.5.5.devDependency @babel/plugin-proposal-object-rest-spread was updated from 7.5.4 to 7.5.5.devDependency @babel/plugin-transform-flow-strip-types was updated from 7.4.0 to 7.4.4.devDependency @babel/preset-env was updated from 7.5.5 to 7.6.0.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.
babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
7.18.0 to 7.18.1.This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 9 commits.
000d6b8 Update CHANGELOG and bump versionffdf69a [Fix] jsx-indent: Does not check indents for JSXText182b045 [Docs] use markdown-magic to automatically sort all rules alphabetically45b9d32 [Docs] jsx-props-no-spreading: fix typo to use correct rulef9aee94 [Fix] jsx-props-no-spreading: add support for namespaced jsx componentse69b113 [Fix] jsx-no-target-blank: allow rel to be an expressionfc6e406 [meta] fix changelog date50df78f [Fix] sort-comp: | isn’t a valid regex flag; u and s area7f6a8b [Tests] on node v13See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I want to fire event when a component fully enters, and fully exits.
I can do fully enter event by adjusting threshold, but I can't use it together with fully exit event.
It would be really nice to have onExitViewport(or onFullyLeaveViewport), and even onFullyEnterViewport as well.
Using HOC option, I pulled latest v1.0.0-alpha.28 and tested on Internet Explorer 11 with the intersection-observer polyfill installed. Error thrown until I downgraded to v1.0.0-alpha.20 where things were working as expected.
Unfortunately, IE11 does not produce the most helpful errors, SCRIPT16389: Unspecified error is what I saw in the console.
devDependency @babel/cli was updated from 7.5.0 to 7.5.5.devDependency @babel/core was updated from 7.5.4 to 7.5.5.devDependency @babel/plugin-proposal-class-properties was updated from 7.5.0 to 7.5.5.devDependency @babel/plugin-proposal-object-rest-spread was updated from 7.5.4 to 7.5.5.devDependency @babel/plugin-transform-flow-strip-types was updated from 7.4.0 to 7.4.4.devDependency @babel/preset-env was updated from 7.5.4 to 7.5.5.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.
babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
You can easily get rid of the about to be deprecated finddomnode with react hooks:
example
Hey guys,
i stumbled over the typings for options which is required because the type is only IntersectionObserverInit. Are you able to make this optional? I am not sure if one can simply add | undefined in the jsdoc, as I didn't used this way of generating types so far.
For now, I am using {} as any object in my code but it would be nice, if I can omit this param fully.
Thanks for your help
Could not find a declaration file for module 'react-in-viewport'. '/Users/Projects/xyz/node_modules/react-in-viewport/dist/index.js' implicitly has an 'any' type.
Try npm install @types/react-in-viewport if it exists or add a new declaration (.d.ts) file containing declare module 'react-in-viewport';ts(7016)
I'm using typescript for my project and tsconfig.json got strict mode true.
Would you like me to make one in DefinitelyTyped? Or is it already done?
I have problem, i creating moving thumbnails for my carousel slider. When thumbnails container is it does not fit in Viewport and active thumb is outside i want move my active thumb to viewport. Now useInViewport returns "true" when whole thumbs container is in Viewport and "false" when some part of him is out. I want have value "true" or "false" for each individual thumb. It is possible when i using hook?
i added a ref to each thumb as below:
_{lightboxThumbsVisible === true &&
React.Children.map(children, (child, index) => {
return (
<div
ref={thumbRef}
key={index}
data-id={index}
className={classNames(styles.dot, {
[styles.active]: index === activedIndex,
})}
onClick={onNavigate}
>
{images[index]}
</div>
);
})}_
Thank you for Your anwser,
Greetings.
It will be great to know all elements which are in view port. Is that possible?
Hi! I'm trying to use this lib with Next.Js and testing it in IE (v11), but in the console i'm getting this a syntax error in this line:
const forwardedRefComponent = (0, _react.forwardRef)((props, ref) => _react.default.createElement(TargetComponent, _extends({}, props, {{forwardedRef: ref}));
Of course it doesn't work, and i'm guessing that can be because of this: any idea? :/ Thanks! :)
Problem: Trigger box is sometimes too big or too small
Platform: Firefox on Win10
Manual tests:
This report is not really a 'bug report'/suggestion per se, but as a FYI-to-warning about expectations how this component, can cause incorrect behavior/data. Either way is fine for lazy-load (or even desirable), but bad for say trackers. Tracker-triggers will be inaccurate due to triggers of the Intersection Observer happening before the user actually sees the tracked item, thus may have a % of false-positives.
If you think the extra code complexity is worth more fine-grained accuracy (eg to improve trackers), then there are options.
I have a functional component Body which takes in props from its parent component Parent.
I am unable to pass down the props by using
const ViewportBlock = handleViewport(Body)
as my rendering fails as no props are passed.
If I do something like
const ViewportBlock = handleViewport(() => Body(props))
then I am unable to attach the ref needed and hence the Intersection api does not work.
Can you please guide me how to use this here?
I am new to React so any help will be appreciated.
2.16.0 to 2.17.0.This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-import is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 61 commits.
0499050 bump to v2.17.0f479635 [webpack] v0.11.18a4226d Merge pull request #1320 from bradzacher/export-ts-namespaces988e12b fix(export): Support typescript namespaces70c3679 [docs] make rule names consistent6ab25ea [Tests] skip a TS test in eslint < 4405900e [Tests] fix tests from #13192098797 [fix] export: false positives for typescript type + value export70a59fe [fix] Fix overwriting of dynamic import() CallExpressione4850df [ExportMap] fix condition for checking if block comment918567d [fix] namespace: add check for null ExportMap2d21c4c Merge pull request #1297 from echenley/ech/fix-isBuiltIn-local-aliases0ff1c83 [dev deps] lock typescript to ~, since it doesn’t follow semver40bf40a [*] [deps] update resolve28dd614 Merge pull request #1304 from bradennapier/feature/typescript-export-typeThere are 61 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
3.9.0 to 3.9.1.This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-flowtype is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 1 commits.
712d840 fix: requireReadOnlyReactProps (#406)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I am using Material tree , and rendering label in Tree based on whether tree item is in viewport or not . But 1 out of 5 times , inViewport is returning false or null , because of which label rendering fails even though tree item is in view port .
This is observed intermittently but can easily be reproduced .
devDependency enzyme was updated from 3.8.0 to 3.9.0.devDependency enzyme-adapter-react-16 was updated from 1.10.0 to 1.11.0.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.
enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hello!
I have react-in-viewport set up and working in my project, however now that I've started writing tests, every component containing handleViewport is throwing the above error. I'm using React testing library and am just trying to run a simple test with the viewport component in the render method provided by React testing library.
For example, testing a functional component called NotificationTestingPage works fine when switching the last line to export default NotificationsPage but throws errors when using export default handleViewport(NotificationsPage). The test looks like this:
test('should render', async () => { // const ref = React.createRef() render( <Provider store={mockStore}> <NotificationsPage /> </Provider> ) })
And the errors thrown are the reference error shown above and a console error looking like this:
The above error occurred in the <handleViewport(NotificationsPage)> component: coming from this file:
node_modules/react-in-viewport/dist/lib/handleViewport.js:56:37)
I've tried multiple things I've found in your docs/stack overflow but nothing seems to work, again the component itself functions as expected, it's just the test that throws this. Let me know if you have any ideas or if I'm missing something. Thanks in advance!
devDependency @storybook/addon-actions was updated from 5.3.13 to 5.3.14.devDependency @storybook/react was updated from 5.3.13 to 5.3.14.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the storybook group definition.
storybook is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
typesVersions attribute (#9907)The new version differs by 41 commits.
91d9c0c v5.3.1401ab760 Update peer dependencies to 5.3.14bb222fa Prettier changelog1ddadfd 5.3.14 changelog5d2c9bf Merge pull request #9907 from storybookjs/fix-ts-export-for-addon-centered0395223 Merge pull request #9873 from storybookjs/9827-ts-default-values7ab4626 Merge pull request #9867 from storybookjs/websocket-cyclic-support57dd1e0 Merge pull request #9834 from davidgoli/support-jsx-preview-filesdd47540 Merge pull request #8897 from fraincs/#8504c25cb3f Merge pull request #9906 from SoloJiang/chore-supplement-raxd28e4a3 Merge pull request #9874 from dmartinjs/patch-31995d87 Merge pull request #9894 from davidenglishmusic/docs-configuration-file-typos654aeb9 Merge pull request #9885 from gaguirre/patch-3853c72a Merge pull request #9857 from pchr-srf/patch-4c2e39d2 Merge pull request #9844 from tskarhed/patch-4There are 41 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Receiving a type error for the ref value passed to the useInViewport hook.
For the following code:
const Section = () => {
const ref = useRef<HTMLElement>(null);
const { enterCount, leaveCount } = useInViewport(ref);
return (
<section ref={ref}>
<div>
<h1>Hello</h1>
<p>{`Enter viewport: ${enterCount} times`}</p>
<p>{`Leave viewport: ${leaveCount} times`}</p>
</div>
</section>
);
};
The following type error appears:
Argument of type 'RefObject<HTMLElement>' is not assignable to parameter of type 'MutableRefObject<HTMLElement>'.
Types of property 'current' are incompatible.
Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
Type 'null' is not assignable to type 'HTMLElement'.ts(2345)
Noticed that there was recently an update to this, not sure if this is working out as intended. It looks like there are truthy checks for any references to this target, so setting the useInViewport function signature to the following — with target being target: React.MutableRefObject<HTMLElement | null> — might be an option here:
(target: React.MutableRefObject<HTMLElement | null>, options?: Options, config?: Config, props?: Props)
devDependency @emotion/core was updated from 10.0.22 to 10.0.27.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the emotion group definition.
emotion is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hi this is a great component, but yet i had a problem when using this in a react typescript project.
When i try to import something from it i get the following error
Could not find a declaration file for module 'react-in-viewport'. '/Users/aeatakishiyev/Documents/GitHub/ui-client/node_modules/react-in-viewport/dist/index.js'
i surpassed it by using require statement, but it would be great if you add a declaration module for this library
Shouldn't there be a return; after the observer is disconnected?
devDependency @babel/cli was updated from 7.7.7 to 7.8.0.devDependency @babel/core was updated from 7.7.7 to 7.8.0.devDependency @babel/plugin-proposal-class-properties was updated from 7.7.4 to 7.8.0.devDependency @babel/plugin-proposal-object-rest-spread was updated from 7.7.7 to 7.8.0.devDependency @babel/plugin-transform-flow-strip-types was updated from 7.7.4 to 7.8.0.devDependency @babel/plugin-transform-spread was updated from 7.7.4 to 7.8.0.devDependency @babel/preset-env was updated from 7.8.0 to 7.8.2.devDependency @babel/preset-flow was updated from 7.7.4 to 7.8.0.devDependency @babel/preset-react was updated from 7.7.4 to 7.8.0.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.
babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
The README.md examples don't work
react: ^16.8.6react-dom: ^16.8.6react-in-viewport: ^1.0.0-alpha.3Code reprodution on Codesandbox:
I noticed that the useInViewport hook has been in this project for 2 years, but I haven't seen any documentation from it, also, I'm not sure how to use it.
Could you add some documentation or an example?
I notice that my page has a different scrolling behaviour when I use useInViewport: the scrolling stops once the component comes into view. I was expecting the hook to only report on components entering and leaving, but it seems that it also affects the scrolling itself (it breaks the fluency of the scrolling).
PS I tested this by only adding or removing the call to useInViewport(), without using the information returned by this hook.
Im still looking at it, the error is:
Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
we are on react 17.
I will for now force previous version
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.