react-ideal-image

---

!Build Statusbuild-badgebuild !Code Coveragecoverage-badgecoverage !versionversion-badgepackage !downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense
!PRs Welcomeprs-badgeprs !Code of Conductcoc-badgecoc
!Watch on GitHubgithub-watch-badgegithub-watch !Star on GitHubgithub-star-badgegithub-star !Tweettwitter-badgetwitter

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 npmnpm which is bundled with nodenode 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 keyemojis):
|
_{stereobooster}
💻 📖 🚇") ⚠️ |
_{Ivan Babak}
📖 |
_{Arun Kumar}
📖 |
_{Andrew Lisowski}
💻 | | :---: | :---: | :---: | :---: |

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

LICENSE

Code - MIT
Icons - Apache License 2.0