Keep element visible once it has been visible once

[jackfranklin]

Hello,

Firstly, thank you for this component, we've really enjoyed using it!

Often when using it we find we have to wrap the component and use onChange to store some local state to keep track of if the component has been visible once. This is so we keep the component on the page constantly once it's been seen by the user once (so if they are scrolling up/down a big list, things don't pop in and out).

This is pretty easily done by storing state and listening to onChange, but I was wondering if you'd consider a PR that added a keepVisibleOnceSeen prop that would do this out of the box. It would remove a small amount of boilerplate we have to have each time we use this component.

If you don't then that's totally cool, but if you think this is a reasonable addition I'd be happy to make the PR and do the work.

Thanks!

Jack

[nirpeled]

Sounds like a great feature to me! I think that you should issue a PR with the suggested code, it will be easier for everyone involved to comment and discuss over it once there is some code to talk about.

[peduarte]

I'd fine this feature useful too as currently I'm keeping state just to toggle the active prop, same as Jack.

Loving this component btw! <3

[AlexandraKlein]

To stayVisible, the following works for me:

class VisibilityContainer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {visible: false}
  }

  onChangeVisibility = isActive => {
    this.setState({active: isActive});
  };

  render() {

    return (
      <VisibilitySensor onChange={this.onChangeVisibility} active={!this.state.active}>
        { ({isVisible} ) =>
          <div className={isVisible ? 'is-visible' : 'not-visible'}>
            { this.props.children }
          </div>
        }
      </VisibilitySensor>
    )
  }
}