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 |