https://github.com/lh0x00/rc-image-loader

handle render a preview image is tiny while waiting for real image loading. the real image is lazy-loaded when loaded. support server-side render for seo!
https://github.com/lh0x00/rc-image-loader

background component image lazy-loading placeholder react rendering seo server-side-rendering ssr

Last synced: about 2 months ago
JSON representation

handle render a preview image is tiny while waiting for real image loading. the real image is lazy-loaded when loaded. support server-side render for seo!

• Host: GitHub
• URL: https://github.com/lh0x00/rc-image-loader
• Owner: lh0x00
• License: mit
• Created: 2018-07-12T02:32:32.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-13T22:11:54.000Z (over 4 years ago)
• Last Synced: 2024-09-25T16:12:51.351Z (3 months ago)
• Topics: background, component, image, lazy-loading, placeholder, react, rendering, seo, server-side-rendering, ssr
• Language: JavaScript
• Homepage: https://codesandbox.io/s/q8vkmqx4vq
• Size: 42 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# About

[![npm version][npm-version-image]][npm-url]

[![npm downloads][npm-downloads-image]][npm-url]

[![github issues][github-issues-image]][github-issues-url]

[![build status][travis-image]][travis-url]

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

```bash

# use npm

$ npm install rc-image-loader

# or yarn

$ yarn add rc-image-loader

```

## CDN

```html

// unpkg

// jsdelivr

```

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

# Usage

[online example](https://codesandbox.io/s/q8vkmqx4vq)

## Child function

```javascript

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 = () => (

  


    // simple

    

      {({ src }) => ()}

    


    // or use with callback

    

      {({ src }) => ()}

    

  

);


export default App;

```

## Render props

```javascript

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 = () => (

  


     ()}

      renderLoading={({ src }) => ()}

      renderError={({ loading }) => (Failed when load image: {loading})}

      onLoad={onLoad}

      onError={onError}

    />

  

);


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                   |

[npm-url]: https://npmjs.org/package/rc-image-loader

[npm-version-image]: https://badge.fury.io/js/rc-image-loader.svg

[npm-downloads-image]: https://img.shields.io/npm/dm/rc-image-loader.svg

[github-issues-image]: https://img.shields.io/github/issues/lamhieu-vk/rc-image-loader.svg

[github-issues-url]: https://github.com/lamhieu-vk/rc-image-loader/issues

[travis-image]: https://travis-ci.com/lamhieu-vk/rc-image-loader.svg?branch=master

[travis-url]: https://travis-ci.com/lamhieu-vk/rc-image-loader?branch=master