Higher Order Component to track top and bottom position of an element (useful for elements that need to change when inside the viewport)

ScrollTrackedComponent.jsx

import React, { Component } from 'react';
import { isClient } from '../../config/app';

const scrollComponent = (WrappedComponent) => {
  class ScrollComponent extends Component {
    state = {
      topPos: 0,
      bottomPos: 0
    };
    componentDidMount() {
      if (isClient) {
        window.addEventListener('resize', this.updateDimensions);
        setTimeout(() => {
          this.updateDimensions();
        }, 500);
      }
    }
    componentWillUnmount() {
      if (isClient) window.removeEventListener('resize', this.updateDimensions);
    }
    updateDimensions = () => {
      const topPos = this.rootElement.getBoundingClientRect().top;
      const bottomPos = this.rootElement.getBoundingClientRect().bottom;
      this.setState({ topPos, bottomPos });
    };
    render() {
      const { topPos, bottomPos } = this.state;
      return (
        <div className="scroll-container" ref={(rootElement) => { this.rootElement = rootElement; }}>
          <WrappedComponent
            {...this.props}
            topPos={topPos}
            bottomPos={bottomPos}
          />
        </div>
      );
    }
  }
  return ScrollComponent;
};
export default scrollComponent;

Example usage:

import scrollComponent from '../ScrollComponent';

const SomeComponent = (props) => {
  // Component definition
}

const positionAwareElement = scrollComponent(SomeComponent);

export default positionAwareElement;

isClient is a conditional flag I use to check if the component is being rendered on the client or the server (React server-side rendering)