NotInView Function and classNameNotInview not registering

[MatthewGreenberg]

<InViewMonitor
            onInView={() => console.log('in view')}
            onNotInView={() => console.log('not in view')}
            classNameNotInView='vis-hidden'
            classNameInView='animated fadeInUp'
>

I never see 'not in view' logged :(

[pocketjoso]

Hi,

Are the classnames added/removed as expected, or is that also not working for you?

What browser are you testing in? Are you using the polyfill, and setting html, body {height: 100%}? https://github.com/snipsco/react-inview-monitor#support

Finally, what version of the library are you using?

[pocketjoso]

@MatthewGreenberg Friendly ping about this.

[MatthewGreenberg]

hey i fixed this! thanks a lot for the response

[grazianodev]

Hi,

I'm having the same problem but don't really know what to do to fix it. Basically the onNotInView function and all 'not classes' (classNameNotInView, classNameNotAboveView) are not working.

If I do this:

<InViewMonitor 
	onInView={() => console.log('in view')}
	onNotInView={() => console.log('not in view')}
>
    <Component />    
</InViewMonitor>

The console logs 'in view' but never logs 'not in view' when the component (I've tried with several different components) scrolls out of view. I'm not using a polyfill but I'm testing with Chrome version 72 (not working in Firefox 66 either).

I love how easy and intuitive the library is, so it would be great to find a fix. Thanks!

[pocketjoso]

Hi @grazianodev. If you add the repeatOnInView prop (true), it will work.

I realise that the library doesn't handle the onNotInView prop otherwise, as the listener get's removed after the first inView, to improve performance (unless you use className or childProp onView props, as they also trigger the "repeat mode"). Until this case with repeatOnInView is properly handled in the library, the documentation should be updated to clarify this.

Let me know if the repeatOnInView solution is sufficient for you.

[grazianodev]

Yes, that works, thanks!