2.1.0 • Published 5 years ago
rc-image-loader v2.1.0
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
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 |