joshwnj / react-visibility-sensor

Sensor component for React that notifies you when it goes in or out of the window viewport.
MIT License
2.33k stars 195 forks source link

Add `stayVisible` prop. #105

Open jackfranklin opened 7 years ago

jackfranklin commented 7 years ago

This is the PR for the suggestion I raised in #100 .

This makes the VisibilitySensor stay visible once it is visible for the first time, even if it then is scrolled out of the viewport.

This means that onChange will only be called once, the first time it becomes visible, and then never again.

linrz commented 7 years ago

What I thought was same as you.I hope this feature can be added into the package.Thanks a lot.

dbx834 commented 7 years ago

Thanks for this.

Klaasvaak commented 7 years ago

Can't you already do this with the active prop? When onChange is called with isVisible, you can set active to true.

CanRau commented 6 years ago

@Klaasvaak but than you would have to manage state in your own component just for this (or am I missing sth?) so this feature would make it easier to integrate it in more components without changing from functional to class just for this to work ;-)

ml242 commented 6 years ago

I just checked this and it works great. It would be nice to get it merged so I could leave my functional components as is. Thank you for the great work on this lib.

strobox commented 6 years ago

Who want quickly implement this feature and who use recomposer I suggest that utility HOC:

import {compose,withState,mapProps} from 'recompose';

export default compose(
    withState('active','setActive',true),// true sensor active
    mapProps(props => ({
        ...props,
        onChange: (isVis,visRes) => {
            if(props.onChange) props.onChange(isVis,visRes);
            if(props.once && props.setActive) props.setActive(!isVis); // if became visible -> false for active
        } 
    })),
)

You should set once to true on your VisibilitySensor, otherwise it will work as original sensor

ArbaazDossani commented 5 years ago

active to true.

active to false, right?