Awesome
<div align="center"> <h1>react-ideal-image</h1> <p>Adaptive image component</p> </div> <hr />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
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> <!-- END doctoc generated TOC please keep comment here to allow auto update -->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
, andreact-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}
/>
)
Props
This is the list of props that you need to pass to the component.
getIcon
function(state: object)
| optional, default icon is provided based on state object
This function decides what icon to show based on the current state of the component.
getMessage
function(icon: string, state: object)
| optional, default message is provided based on the icon and state object.
This function decides what message to show based on the icon (returned from getIcon prop) and the current state of the component.
getUrl
function({})
| optional, no useful default
This function is called as soon as the component enters the viewport and is used to generate urls based on width and format if props.srcSet
doesn't provide src field.
height
number
| required
The Height of the image in px.
icons
object
| required
This provides a map of the icons. By default, the component uses icons from material design, implemented as React components with the SVG element. You can customize icons
const icons = {
load: DownloadIcon,
//...
}
loader
string
| optional, defaults to 'xhr'
This prop takes one of the 2 options, xhr
and image
. Read more about it here.
placeholder
object
| required
This takes one of the 2 objects
// To add a solid color placeholder
{
color: ''
}
or
/**
* To add a low quality image
* [Low Quality Image Placeholder](https://github.com/zouhir/lqip)
* [SVG-Based Image Placeholder](https://github.com/technopagan/sqip)
* base64 encoded image of low quality
*/
{
lqip: ''
}
Read more about it here.
shouldAutoDownload
function({})
| optional, default function is provided which decides based on the device network.
This function decides if image should be downloaded automatically. The default function returns false
for a 2g
network,
for a 3g
network it decides based on props.threshold
and for a 4g
network it returns true
by default.
srcSet
array[srcType: object]
| required
This provides an array of sources of different format and size of the image. Read more about it here.
The srcType
has below structure
srcType = {
width: number, // required
src: string,
size: number,
format: string, // one of the 'jpeg' or 'webp'
}
theme
object
| required
This provides a theme to the component. By default, the component uses inline styles, but it is also possible to use CSS modules and override all styles.
const theme = {
placeholder: {
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
position: 'relative',
},
// ...
}
threshold
number
| optional
Tells how much to wait in milliseconds until consider the download to be slow.
width
number
| required
Width of the image in px.
Other Solutions
- react-progressive-image
- react-lazyload
- react-lazy-image
- react-image
- react-lazy-load
- react-graceful-image
- react-worker-image
- lazy-image
- react-simple-image
- react-power-picture
- react-shimmer
- gatsby-image
- react-async-elements
<Img>
Contributors
Thanks goes to these people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore -->This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
Code - MIT
Icons - Apache License 2.0