Noteworthy Programming Masterpiece
    Wondering what’s next for npm?Check out our public roadmap! »

    @tjoskar/react-lazyload-img
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.3 • Public • Published

    react-lazyload-img Build Status codecov

    Lazy image loader for react

    Install

    $ npm install @tjoskar/react-lazyload-img
    

    Usage

    import React, { Component } from 'react'
    import { LazyLoadImage, LazyLoadBackgroundImage } from '@tjoskar/react-lazyload-img'
     
    const App = () => {
      const defaultImage = 'https://www.placecage.com/1000/1000'
      const image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg'
      return (
        <>
          { /* To use an img-tag */ }
          <LazyLoadImage width={50} height="200px" defaultImage={this.defaultImage} image={this.image} />
     
          { /* To use a div-tag with background image styling */ }
          <LazyLoadBackgroundImage width="100%" height="200px" defaultImage={this.defaultImage} image={this.image} />
        </>
      )
    }

    You can also pass options (root, rootMargin, threshold) to the IntersectionObserver constructor. See the documentation for IntersectionObserver for more info. Eg.

    <LazyLoadImage options={{ root: window }} height="200px" defaultImage={this.defaultImage} image={this.image} />

    See: https://stackblitz.com/edit/react-lazy-load-image for examples

    Props

    Both LazyLoadImage and LazyLoadBackgroundImage have the same props:

    defaultImage

    Type: string

    Path to the default image (placeholder) to show before the lazy loading

    image

    Type: string
    Default: 60

    Path to the image to be lazy loaded

    errorImage?

    Type: string

    Path to an image to show if the loading of image fails, will use defaultImage if not set

    onLoaded?

    Type: () => void

    Callback function after the image has been loaded

    options?

    Type: ObserverOptions

    IntersectionObserver options. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

    style?

    Type: React.CSSProperties

    Will be passed to the underlying div/img tag

    height

    Type: () => void

    The height of the image (can be set to auto)

    width

    Type: () => void

    The width of the image (can be set to auto)

    Requirement

    The browser you are targeting needs to have support for IntersectionObserver and WeakMap or you need to import polyfill for them. You also need to use a bundler that understand es-modules (eg. webpack, rollup, parcel, fusebox, etc.)

    License

    MIT

    Install

    npm i @tjoskar/react-lazyload-img

    DownloadsWeekly Downloads

    88

    Version

    1.2.3

    License

    MIT

    Unpacked Size

    3.08 MB

    Total Files

    43

    Last publish

    Collaborators

    • avatar