linecode / react-ideal-image

🖼️ An Almost Ideal React Image Component

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

Other Solutions

• react-progressive-image
• react-lazyload
• react-lazy-image
• react-image
• react-lazy-load
• react-graceful-image
• react-worker-image
• lazy-image

Contributors

Thanks goes to these people (emoji key):

stereobooster 💻 📖 🚇 ⚠️	Ivan Babak 📖	Arun Kumar 📖

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

LICENSE

Code - MIT

Icons - Apache License 2.0