An Almost Ideal React Image Component

by React

react-ideal-image

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.

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}
  />
)

GitHub