React component which renders a blurred preview of an image until it enters the viewport (uses intersection observer)

LazyImage.tsx

import React, { Component, CSSProperties } from 'react';

export interface Props {
  'className'?: string;
  'style'?: CSSProperties;
  'src': string;
  'data-src': string;
  [key: string]: any;
}

export interface State {
  intersecting: boolean;
}

export default class LazyImage extends Component<Props, State> {

  public state: State = {
    intersecting: false
  }

  private img: React.RefObject<HTMLImageElement> = React.createRef();
  private intersection = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (!entry.isIntersecting)
        return;

      this.setState({ intersecting: true });
      this.intersection.unobserve(entry.target);
    })
  })

  public componentDidMount() {
    const { img, intersection } = this;

    if (!img.current)
      throw new Error('Somehow img is not defined 😒');
    
    intersection.observe(img.current);
  }

  public componentWillUnmount() {
    this.intersection.disconnect();
  }

  public render() {
    const { className: c, src, ['data-src']: dataSrc, ...props } = this.props;
    const { intersecting } = this.state;

    return intersecting ? (
      <img className={c} src={dataSrc} {...props} />
    ) : (
      <img ref={this.img} className={`${c} lazy`} src={src} {...props} />
    );
  }

}