react-ideal-image

2019-10-10 admin

react-ideal-image是什么

什么是react-ideal-image,Adaptive image component

react-ideal-image使用教程帮助文档

<div align=“center”>

react-ideal-image

Adaptive image component

</div>


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
  • Usage
  • Props
    • getIcon
    • getMessage
    • getUrl
    • height
    • icons
    • loader
    • placeholder
    • shouldAutoDownload
    • srcSet
    • theme
    • threshold
    • width
  • Other Solutions
  • Contributors
  • LICENSE

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}
  />
)

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

Contributors

Thanks goes to these people (emoji key):

| <sub>stereobooster</sub> <g-emoji class=“g-emoji” alias=“computer” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f4bb.png”>💻</g-emoji> <g-emoji class=“g-emoji” alias=“book” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f4d6.png”>📖</g-emoji> <g-emoji class=“g-emoji” alias=“metro” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f687.png”>🚇</g-emoji> <g-emoji class=“g-emoji” alias=“warning” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/26a0.png”>⚠️</g-emoji> | <sub>Ivan Babak</sub> <g-emoji class=“g-emoji” alias=“book” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f4d6.png”>📖</g-emoji> | <sub>Arun Kumar</sub> <g-emoji class=“g-emoji” alias=“book” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f4d6.png”>📖</g-emoji> | <sub>Andrew Lisowski</sub> <g-emoji class=“g-emoji” alias=“computer” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f4bb.png”>💻</g-emoji> | <sub>Timothy Vernon</sub> <g-emoji class=“g-emoji” alias=“warning” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/26a0.png”>⚠️</g-emoji> | <sub>vishalShinde</sub> <g-emoji class=“g-emoji” alias=“book” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f4d6.png”>📖</g-emoji> | <sub>Evgeniy Kumachev</sub>

<g-emoji class=“g-emoji” alias=“book” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f4d6.png”>📖</g-emoji>
[

<sub>John Munn</sub>](https://github.com/Tawe) <g-emoji class=“g-emoji” alias=“computer” fallback-src=“https://github.githubassets.com/images/icons/emoji/unicode/1f4bb.png”>💻</g-emoji> | | | | | | |

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

LICENSE

Code - MIT

Icons - Apache License 2.0

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77035.html

文章标题:react-ideal-image

回到顶部