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

    Install

    npm i rc-image-loader

    DownloadsWeekly Downloads

    0

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    41.7 kB

    Total Files

    21

    Last publish

    Collaborators

    • lamhieu