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

Bug Report

Describe the Bug

A clear and concise description of what the bug is.

How to Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Conditionally apply the ref
2. Scroll to bottom
3. Observe no callbacks fired and no entry exists

CodeSandbox Link

https://codesandbox.io/s/react-cool-inviewissues493-yks98

Expected Behavior

I would expect the observer to fire callbacks

Screenshots

Your Environment

• Device: MacBook Pro
• OS: macOS X
• Browser: Chrome
• Version: 1.2.2

Additional Information

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>
	  );
})}

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

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.

Bug Report

Describe the Bug

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.

How to Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Conditionally apply the ref
2. Change condition to false
3. Scroll
4. Observe error Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

CodeSandbox Link

https://codesandbox.io/s/react-cool-inviewissues494-cd5lo

Expected Behavior

I would expect no error

Screenshots

Your Environment

• Device: MacBook Pro
• OS: macOS X
• Browser: Chrome
• Version: v1.2.2

Additional Information

It looks like there is a missing safety check that the ref.current isn't null.

Bug Report

Describe the Bug

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.

How to Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Setup infinite scroll
2. Scroll down
3. Observe no scrollDirection while scrolling down
4. Observe scrollDirection of 'up' when the screen repaints with new items

CodeSandbox Link

https://codesandbox.io/s/react-cool-inviewissues499-kl2xg

Expected Behavior

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.

Screenshots

Then scrolling after new load:

Your Environment

• Device: MacBook Pro
• OS: macOS X
• Browser: Chrome
• Version: v2.0.1

Additional Information

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.

Bug Report

Describe the Bug

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 refs from the hook will be used on divs, 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

How to Reproduce

Use useInView in TypeScript without providing a generic.

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

Bug Report

Describe the Bug

When I use this hook in any component, it causes infinite re-renders. Am I doing something wrong?

CodeSandbox Link

You can see it here: CodeSandbox.

Thanks

Bug Report

Describe the Bug

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.

How to Reproduce

Just follow the example set in the Trigger Animations section of the README.

CodeSandbox Link

https://codesandbox.io/s/react-cool-inview-example-forked-bcf57

Expected Behavior

0 shouldn’t require a unit.

Screenshots

Add screenshots to help explain your problem.

Your Environment

• Device: MacBook
• OS: macOS BigSur 11.1
• Browser: Chrome
• Version: 89.0.4389.90 (Official Build) (x86_64)

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!

Bug Report

Describe the Bug

The rootMargin is being ignore until after the first time the IntersectionObserver fires isIntersecting.

How to Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Provide custom rootMargin and custom ref
2. Scroll down
3. Observe the isIntersecting is false until the element is visible.
4. Scroll down again
5. Observe the isIntersecting is true at the expected rootMargin

CodeSandbox Link

https://codesandbox.io/s/react-cool-inviewissues495-0g4yk

Expected Behavior

Should respect the rootMargin on the initial scroll

Screenshots

Your Environment

• Device: MacBook Pro
• OS: macOS X
• Browser: Chrome
• Version: v1.2.2

Description

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.

Possible solution

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.

Bug Report

Describe the Bug

The inView is still tracking the status of the initial last item after loading additional items.

How to Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Setup infinite scrolling example
2. Scroll down
3. Observe inView remains true even after loading new items and settings new item with observe
4. Observe the inView variable switches to false once the previously tracked item is fully off screen

CodeSandbox Link

https://codesandbox.io/s/react-cool-inviewissues500-qsn5q

Expected Behavior

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.

Screenshots

Turns false after the initial last item (20 in the example) is off screen:

Your Environment

• Device: MacBook Pro
• OS: macOS X
• Browser: Chrome
• Version: v2.0.1

Additional Information

On an infinite scroll style example, I don't believe the observe is necessary within onEnter since the ref is calling the observe

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 👍

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

Bug Report

Describe the Bug

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.

How to Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://codesandbox.io/s/loving-wave-zlokm?file=/src/App.js
2. Click on Console on the browser preview
3. Observe "Rendering..." being printed continuously...

Expected Behavior

It should render only when ìnView` changes.

Your Environment

• Device: Desktop PC
• OS: Windows 10
• Browser: Firefox v89
• Version: v2.0.3