An Almost Ideal React Image Component Sample in 2020

An Almost Ideal React Image Component Sample in 2020

tutorials -


I need React component to asynchronously load images, which will adapt based on network, which will allow a user to control, which image to load.

This started as an exercise - how to build ideal React image component. The focus was more on UX and browser capabilities, rather than React code. I created react component and published it to npm, but it has no tests and not battle tested in the wild, use it at your own risk.


This module is distributed via npm which is bundled with node and
should be installed as one of your project's devDependencies:

npm install react-ideal-image react-waypoint --save


Example for create-react-app (you need v2 for macros) based project

import React from 'react'
import lqip from 'lqip.macro'
import IdealImage from 'react-ideal-image'

import image from './images/doggo.jpg'
const lqip = lqip('./images/doggo.jpg')

const App = () => (
    srcSet={[{src: image, width: 3500}]}


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff