React-ideal-image NPM

The problem

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 solution

Read the introduction.

Installation

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

Usage

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 = () => (
  <IdealImage
    placeholder={{lqip}}
    srcSet={[{src: image, width: 3500}]}
    alt="doggo"
    width={3500}
    height={2095}
  />
)