Package Exports

react-lazy-load-marker
react-lazy-load-marker/dist/cjs/core.js
react-lazy-load-marker/dist/esm/core.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-lazy-load-marker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-lazy-load-marker

React component for IntersectionObserver callback

Features

Auto add event listener for Intersection (when an element is scrolled into viewport)
Auto cleanup the event listner when unmounted, to prevent memory leaks
Support custom style, e.g. transform, translate, position, display, .e.t.c

Demo: https://react-lazy-load-marker-demo.surge.sh

Install

## using npm
npm install react-lazy-load-marker

## or using yarn
yarn add react-lazy-load-marker

## or using pnpm
pnpm install react-lazy-load-marker

Typescript Signature

interface Props {
  children?: any
  onEnter: () => void
  style?: CSSProperties
  rootMargin?: string
  threshold?: number
}

export default class LazyLoadMarker extends React.Component<Props> {}

Usage

import React, { useState } from 'react'
import LazyLoadMarker from 'react-lazy-load-marker'

const LoadOnLastOneExample = () => {
  const total = 100
  const batch = 10
  const [items, setItems] = useState<number[]>([])
  const hasMore = items.length < total
  function loadMore() {
    setTimeout(() => {
      let newItems = [...items]
      for (let i = 0; i < batch; i++) {
        newItems.push(Math.random())
      }
      setItems(newItems)
    }, 1000)
  }
  return (
    <div>
      {items.map((item, i) => (
        <div key={item} style={{ height: '150px', border: '1px solid black' }}>
          {i + 1}/{total}: {item}
        </div>
      ))}
      {hasMore ? (
        <LazyLoadMarker onEnter={loadMore}>
          <p>Loading more ...</p>
        </LazyLoadMarker>
      ) : null}
    </div>
  )
}

Moreover, you can pre-load the items when the user scroll to last-N item, e.g.

let listItems = items.map(item => (
  <div className="item" key={item.id}>
    <div>id: {item.id}</div>
    <img src={item.image} />
  </div>
))

if (hasMore) {
  const preload = 5
  listItems.splice(
    -preload,
    0,
    <LazyLoadMarker key={'loadMore'} onEnter={loadMore} />,
  )
}

return (
  <>
    {listItems}
    {hasMore ? <p>Loading more ...</p> : null}
  </>
)

Details see DemoApp.tsx

License

This project is licensed with BSD-2-Clause

This is free, libre, and open-source software. It comes down to four essential freedoms [ref]:

The freedom to run the program as you wish, for any purpose
The freedom to study how the program works, and change it so it does your computing as you wish
The freedom to redistribute copies so you can help others
The freedom to distribute copies of your modified versions to others