rc-image-loader

2.1.0 • Public • Published

About

npm version npm downloads github issues build status

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

Package Sidebar

Install

npm i rc-image-loader

Weekly Downloads

7

Version

2.1.0

License

MIT

Unpacked Size

41.7 kB

Total Files

21

Last publish

Collaborators

  • lamhieu