react-in-viewport

React In Viewport Component

Wrapper component to detect if the component is in viewport. Use Intersection Observer API

Dependencies: Intersection Observer Polyfills

Usages

Wrap your component with handleViewport HOC, you will receive inViewport props indicating the component is in viewport or not.

handleViewport HOC accepts three params

• Component
• Options: second param is the option you want to pass to Intersection Observer API.
• Config object:

• disconnectOnLeave { Boolean } disconnect intersection observer after leave

The HOC preserve onEnterViewport and onLeaveViewport props as a callback

NOTE: Stateless: Need to add ref={this.props.innerRef} on your component

import handleViewport from 'react-in-viewport';

const Block = (props: { inViewport: boolean }) => {
  const { inViewport, innerRef } = props;
  const color = inViewport ? '#217ac0' : '#ff9800';
  const text = inViewport ? 'In viewport' : 'Not in viewport';
  return (
    <div className="viewport-block" ref={innerRef}>
      <h3>{ text }</h3>
      <div style={{ width: '400px', height: '300px', background: color }} />
    </div>
  );
};

const ViewportBlock = handleViewport(Block, /** options: {}, config: {} **/);

const Component = (props) => (
  <div>
    <div style={{ height: '100vh' }}>
      <h2>Scroll down to make component in viewport</h2>
    </div>
    <ViewportBlock onEnterViewport={() => console.log('enter')} onLeaveViewport={() => console.log('leave')} />
  </div>
))

• If you need to know how many times the component has entered the viewport use the prop enterCount.
• If you need to know how many times the component has left the viewport use the prop leaveCount.

import React, { Component } from 'react';
import handleViewport from 'react-in-viewport';

class MySectionBlock extends Component {
  getStyle() {
    const { inViewport, enterCount } = this.props;
    //Fade in only the first time we enter the viewport
    if (inViewport && enterCount === 1) {
      return { WebkitTransition: 'opacity 0.75s ease-in-out' };
    } else if (!inViewport && enterCount < 1) {
      return { WebkitTransition: 'none', opacity: '0' };
    } else {
      return {};
    }
  }

  render() {
    const { enterCount, leaveCount } = this.props;
    return (
      <section>
        <div className="content" style={this.getStyle()}>
          <h1>Hello</h1>
          <p>
            {`Enter viewport: ${enterCount} times`}
          </p>
          <p>
            {`Leave viewport: ${leaveCount} times`}
          </p>
        </div>
      </section>
    );
  }
}
const MySection = handleViewport(MySectionBlock, { rootMargin: '-1.0px' });

export default MySection;

Who is using this component

• Tinder