柚木

stereobooster/react-ideal-image

README.md

react-ideal-image

Adaptive image component


Build Status Code Coverage version downloads MIT License

All Contributors PRs Welcome Code of Conduct

Watch on GitHub Star on GitHub Tweet

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 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

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