rc-image-loader

About

Handle render a preview image is tiny while waiting for real image loading. the real image is lazy-loaded when loaded. when use package in server-side, image source return is real-image for best seo.

Installation

# use npm 
$ npm install rc-image-loader
 
# or yarn 
$ yarn add rc-image-loader

CDN

// unpkg
<script src="https://unpkg.com/rc-image-loader/dist/rc-image-loader.js"></script>
 
// jsdelivr
<script src="https://cdn.jsdelivr.net/npm/rc-image-loader/dist/rc-image-loader.js"></script>

Note use CDN in browser, you can call rcImageLoader from Window API. it is available at window.rcImageLoader

Usage

online example

Child function

import React from "react";
import ImageLoader from "rc-image-loader";
 
const onLoad = data => console.log(`Loaded image: `, data.src);
 
const onError = data => console.log(`Error image: `, data.loading);
 
const App = () => (
  <div>
    // simple
    <ImageLoader placeholder="tiny-image.jpg" image="real-image.jpg">
      {({ src }) => (<img src={src} alt="example for rc-image-loader" />)}
    </ImageLoader>
 
    // or use with callback
    <ImageLoader placeholder="tiny-image.jpg" image="real-image.jpg" onLoad={onLoad} onError={onError}>
      {({ src }) => (<img src={src} alt="example for rc-image-loader" />)}
    </ImageLoader>
  </div>
);
 
export default App;

Render props

import React from "react";
import ImageLoader from "rc-image-loader";
 
const onLoad = data => console.log(`Loaded image: `, data.src);
 
const onError = data => console.log(`Error image: `, data.loading);
 
const App = () => (
  <div>
    <ImageLoader
      placeholder="tiny-image.jpg"
      image="real-image.jpg"
      renderComponent={({ src }) => (<img src={src} alt="render real image" />)}
      renderLoading={({ src }) => (<img src={src} alt="render tiny image" />)}
      renderError={({ loading }) => (<text>Failed when load image: {loading}</text>)}
      onLoad={onLoad}
      onError={onError}
    />
  </div>
);
 
export default App;

Documents

Config

name	type	description
image	String	(required) real image source
placeholder	String	(required) tiny image source
renderComponent	Func	(optional) component will render when loaded real image, when use render props. defualt: undefined
renderError	Func	(optional) component will render have a error load image, when use render props. defualt: undefined
renderLoading	Func	(optional) component will render when loading real image, when use render props. defualt: undefined
onLoaded	Func	(optional) function callback when loaded image. default: undefined
onError	Func	(optional) function callback when failed load image. default: undefined

Props

values return to your components, append to props

name	type	description
src	String	image source render (tiny or real)
loading	String	image source is loading
isError	Boolean	if have a error when load image
isLoading	Boolean	if real image is loading