react-ideal-image

Adaptive 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

This module is distributed via npmwhich is bundled with nodeand 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 key):


stereobooster

💻📖🚇⚠️

Ivan Babak

📖

Arun Kumar

📖

Andrew Lisowski

💻

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

LICENSE

Code - MIT

Icons - Apache License 2.0

HomePage

https://github.com/stereobooster/react-ideal-image#readme

Repository

https://github.com/stereobooster/react-ideal-image.git


上一篇:react-router-prop-types
下一篇:VUE知识点整理

相关推荐

官方社区

扫码加入 JavaScript 社区