react-ideal-image

Adaptive image component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-ideal-image
3,279360.0.55 years ago5 years agoMinified + gzip package size for react-ideal-image in KB

Readme

react-ideal-image

Adaptive image component




!Build Statusbuild-badgebuild !Code Coveragecoverage-badgecoverage !versionversion-badgepackage !downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense
All Contributors !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

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

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