react-ideal-image

Adaptive image component

---

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.

Table of Contents

• Installation
• Usage
• Other Solutions
• Contributors
• LICENSE

Installation

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

npm install react-ideal-image --save

This package also depends on react, prop-types, and react-waypoint. Please make sure you have those installed as well.

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

Other Solutions

• react-progressive-image
• react-lazyload
• react-lazy-image
• react-image
• react-lazy-load
• react-graceful-image
• react-worker-image
• lazy-image
• react-simple-image
• react-power-picture

Contributors

Thanks goes to these people (emoji key):

stereobooster 💻 📖 🚇 ⚠️	Ivan Babak 📖	Arun Kumar 📖	Andrew Lisowski 💻	Timothy Vernon ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

Code - MIT

Icons - Apache License 2.0