Smart react image with IntersectionObserver API and animations

Smart react image with IntersectionObserver API and animations

React lazy load images with IntersectionObserver API

React Simple Img Logo - Animated lazy loading - on demand

React Simple Img

Tweet CircleCI Coverage Status npm downloads npm npm

Smart react lazy load image with IntersectionObserver API, Priority Hints and animations :clap:

  • Speed up initial page loads by loading only images above the fold
  • Responsive with placeholders and animations
  • Support Priority Hints with importance attribute
  • Smart download logic using IntersectionObserver
  • Simple usage and tiny size includes polyfill (minified + gzipped)

Install

npm install react-simple-img

Quickstart

import { SimpleImg } from 'react-simple-img';

export default () => <SimpleImg height={500} src="your image path" />;

API

Github Repository

Tags: #React #Images