useInfiniteScrollBinding

GitHub View source

A Vue composable wrapping VueUse useInfiniteScroll, adding a reactive canLoadMore guard so you control exactly when more items are fetched.

Usage

useInfiniteScrollBinding builds on top of VueUse's useInfiniteScroll with two improvements:

canLoadMore accepts MaybeRefOrGetter<boolean>, so callers can pass a ref or getter directly without writing a () => ... closure.
The return value passes through UseInfiniteScrollReturn (isLoading / reset) as-is, and explicitly exposes the direction / interval options.

<script setup lang="ts">
import { useInfiniteScrollBinding } from '@movk/core'
import { ref, useTemplateRef } from 'vue'

const listRef = useTemplateRef<HTMLElement>('listRef')
const hasMore = ref(true)

async function fetchNextPage() {
  // Load the next page
}

const { isLoading, reset } = useInfiniteScrollBinding(
  () => listRef.value,
  {
    distance: 100,
    canLoadMore: hasMore,
    onLoadMore: fetchNextPage,
  },
)
</script>

<template>
  <div ref="listRef" class="overflow-auto">
    <!-- list items -->
  </div>
</template>

distance is only read once internally by VueUse during initialization; runtime changes have no effect. Therefore, even though the parameter type is MaybeRefOrGetter<number>, this is only for caller convenience and does not represent true reactive behavior.

API

`useInfiniteScrollBinding(getEl, options)`

Parameters

getEl

() => HTMLElement | null | undefined required

A getter that returns the scroll container element.

options

UseInfiniteScrollBindingOptions required

Configuration options.

`UseInfiniteScrollBindingOptions`

distance

MaybeRefOrGetter<number> required

The distance threshold (in px) that triggers loading.

onLoadMore

() => void | Promise<void> required

The callback triggered when the threshold is reached. Supports async.

canLoadMore

MaybeRefOrGetter<boolean>

Whether loading more is allowed.

direction

'top' | 'bottom' | 'left' | 'right'

The scroll direction that triggers loading.

interval

number

The minimum interval between two triggers (in ms).

Returns

isLoading

ComputedRef<boolean>

The loading state managed internally by VueUse.

reset

() => void

Resets the internal state, useful for re-enabling infinite scroll when the data source changes.

Changelog

No recent changes

useCopyCode

A Vue composable that copies text to the clipboard using the async Clipboard API, with a legacy execCommand fallback for older browsers.

useOverflowDetection

A Vue composable that detects truncated text via ResizeObserver and MutationObserver, supporting single-line ellipsis and multi-line clamping.