wellyshen / react-cool-inview Goto Github PK
View Code? Open in Web Editor NEW😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
Home Page: https://react-cool-inview.netlify.app
License: MIT License
😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
Home Page: https://react-cool-inview.netlify.app
License: MIT License
The rootMargin
is being ignore until after the first time the IntersectionObserver
fires isIntersecting
.
Steps to reproduce the behavior, please provide code snippets or a repository:
rootMargin
and custom ref
isIntersecting
is false
until the element is visible.isIntersecting
is true
at the expected rootMargin
https://codesandbox.io/s/react-cool-inviewissues495-0g4yk
Should respect the rootMargin
on the initial scroll
I notice that OnEnter will trigger when the element starts to enter the viewport, but OnLeave triggers when the element fully leaves the viewport.
I think after the element leaves the viewport, trigger some function just not helping too much.
Is there any way to trigger onLeave when the beginning? maybe a prop or something will do.
Great Library, Thank you for your work.
Hi there,
I cannot figure out why useEffect is trying to set state here after component is unmounted. Even wierder is the fact that this error fires only once.
Do you have any clue why this would be a case?
Cheers for the coolest hooks, btw 👍
This hook continually rerenders components when using ref={(el) => observe(el)}
. The problem does not exist when using ref={observe}
.
I need to use ref={(el) => observe(el)}
because I need to observe a specific element with both useInView
and useDimensions
, so in the end I'll have something like this:
ref={(el) => {
observeInView(el);
observeDimensions(el)
}}
I've started having this issue with react-cool-dimensions
v2.x.x, and react-cool-inview
v2.x.x. Previously, I simply shared the same ref
between both hooks, and everything was much easier to handle.
Steps to reproduce the behavior, please provide code snippets or a repository:
Console
on the browser previewIt should render only when ìnView` changes.
With version 3.0.0:
import { InView } from 'react-cool-inview'
results in:
Module '"react-cool-inview"' has no exported member 'InView'
I used yarn to install
Great hook you've put together, been using it for a while and it works like a treat!
I've discovered what I think is a bug. On the project I'm working on right now I have a navigation that jumps to different sections on the homepage. I've noticed that if I jump to a section (via scrollTop
) and then scroll upwards, when onEnter
triggers scrollDirection.vertical
is up
, when it should be down
.
If I test with onChange
I see up
on the first threshold and the following ones will be down
as expected.
I'm just getting ready to launch this project so I'll revisit this thread with a test case as soon as I have the time if you can't reproduce on your own.
Thanks again!
There are good examples in the README but it's tough to tell how to get this working in TypeScript. There is an example in the demo folder but this doesn't run immediately in CodeSandbox so it's a little challenging to find it from there.
Since most ref
s from the hook will be used on div
s, it would be helpful to have documentation in the README about the generic you can pass to make this work. Otherwise, you'll end up getting:
Type 'RefObject<HTMLElement>' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>'.
Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'. TS2322
Use useInView
in TypeScript without providing a generic.
In the README file the Trigger Animations example uses a value of "-100px 0"
for rootMargin
, but rootMargin
requires absolute pixel or percent units, otherwise it throws the following error:
Failed to construct 'IntersectionObserver': rootMargin must be specified in pixels or percent.
Just follow the example set in the Trigger Animations section of the README.
https://codesandbox.io/s/react-cool-inview-example-forked-bcf57
0
shouldn’t require a unit.
Add screenshots to help explain your problem.
It's very normal to observe more than one element. Tracking visibility or lazy loading doesn't stop at only one component. I think it would be great if the library supports multiple refs.
react-intersection-observer
use useCallback method inside a component to set the current node ref using useRef
from react. I am sure you already looked into it but if you make a workaround or a stable solution out of it that would be very helpful.
A clear and concise description of what the bug is.
Steps to reproduce the behavior, please provide code snippets or a repository:
ref
https://codesandbox.io/s/react-cool-inviewissues493-yks98
I would expect the observer to fire callbacks
Seems to be an issue when ref
is conditionally set.
{hasNextPage && <div ref={triggerRef}>Loading...</div>}
{items.map((item, i) => {
return i === items.length - 1 ? (
<div ref={lastItemRef} key={item.id}>
{item.id}
</div>
) : (
<div key={item.id}>{item.id}</div>
);
})}
Hi, can we use cool-inview with preact? I have tried preact/compat but had some major issues like non-stop rerendering with the components.
Hello, as a new React Next.js learner, I have a question.
Today I got this amazing package for my react app, and put my comp between
inView
so it only shows posts images on scroll, which makes the posts so fast and cool.
My question is,
Are photos still indexable by Google? Google will find the pictures and posts? How it will effect the SEO generally?
Thanks
You need to change observe
to accept an optional element
I get an error when using useInView and useDimensions when trying to compose the observe callback :
const { observe:observeInView, inView } = useInView({...})
const { observe:observeDimension, currentBreakpoint } = useDimensions({...})
let combinedObserve = useCallback(el=>{
observeInView(el);
observeDimension(el);
}, [observeInView, observeDimension])
ts error is Expected 0 arguments, but got 1.ts(2554)
This is because observe is defined as :
observe: () => void;
it needs to look something like
observe: (element?: HTMLElement) => void
While scrolling down, the scrollDirection
doesn't update to say 'down'
. When the new page of items loads, it causes the scroll bar to jump and reports the scrollDirection
of 'up'
of which, I (the user) never scrolled up and can be misleading.
Steps to reproduce the behavior, please provide code snippets or a repository:
scrollDirection
while scrolling downscrollDirection
of 'up'
when the screen repaints with new itemshttps://codesandbox.io/s/react-cool-inviewissues499-kl2xg
I would expect while scrolling to show the direction I'm scrolling.
I would expect after a period of time not scrolling, to remove the scrollDirection.
I would expect when new items load/render, the scrollDirection
won't report the jump up.
Then scrolling after new load:
Hello, how can I use {inView && ... }
inside a component? for example I want my Image just to be loaded in view, but it loads blurDataURL
even before scrolling.
export default function Image({ src, ...rest }) {
const { observe, inView } = useInView({
onEnter: ({ unobserve }) => unobserve(), // only run once
})
return (
<div ref={observe} className="max-w-screen-sm mx-auto text-center">
<NextImage
placeholder="blur"
blurDataURL={`/_next/image?url=${src}&w=16&q=1`}
src={`/_next/image?url=${src}&w=640&q=75`}
{...rest}
/>
</div>
)
}
I was actually using inview for the whole component like this:
{inView &&
<NextImage
placeholder="blur"
blurDataURL={`/_next/image?url=${src}&w=16&q=1`}
src={`/_next/image?url=${src}&w=640&q=75`}
{...rest}
/>}
but then I found that my Table of Content will be useless, because once the user clicks on them, it takes them to the wrong text, because images are not still all loaded. so then I decided to only use inView (which I don't know how to) for src only.
what do you think?
Thanks
The inView
is still tracking the status of the initial last item after loading additional items.
Steps to reproduce the behavior, please provide code snippets or a repository:
inView
remains true
even after loading new items and settings new item with observe
inView
variable switches to false
once the previously tracked item is fully off screenhttps://codesandbox.io/s/react-cool-inviewissues500-qsn5q
I would expect after loading new items, and a new ref
/observe
being applied, that the previously tracked item, is no longer tracked and inView
to report false
.
Turns false
after the initial last item (20 in the example) is off screen:
On an infinite scroll style example, I don't believe the observe
is necessary within onEnter
since the ref
is calling the observe
When I use this hook in any component, it causes infinite re-renders. Am I doing something wrong?
You can see it here: CodeSandbox.
Thanks
If passing a custom ref
to the hook, the observe
and unobserve
functions aren't checking that it isn't null
before treating it as an Element
.
Steps to reproduce the behavior, please provide code snippets or a repository:
Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
https://codesandbox.io/s/react-cool-inviewissues494-cd5lo
I would expect no error
It looks like there is a missing safety check that the ref.current
isn't null
.
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.