Data DisplayDmduskmoonimplemented6 demos

DmInfiniteScroll

DmInfiniteScroll loads more content as a scroll container approaches its threshold.

Import@duskmoon-dev/components/dm-infinite-scroll

2API sections

14documented props

4behavior scenarios

Key API

idprefixdataLengthnexthasMoreloader

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmInfiniteScroll is most often configured through `id`, `prefix`, `dataLength`, `next`.

Covered behavior

Renders prefixed scroll container and children

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

DuskMoon Dm Infinite Scroll

Basic usage

authored

Import the component stylesheet and DmInfiniteScroll from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmInfiniteScroll } from "@duskmoon-dev/components/dm-infinite-scroll";

export function Example() {
  return (<DmInfiniteScroll>DuskMoon Dm Infinite Scroll</DmInfiniteScroll>);
}

Preview

DuskMoon Dm Infinite Scroll

Renders prefixed scroll container and children

test-backed

DmInfiniteScroll scenario from the component test coverage: renders prefixed scroll container and children.

Source

import "@duskmoon-dev/components/styles.css";
import { DmInfiniteScroll } from "@duskmoon-dev/components/dm-infinite-scroll";

export function DmInfiniteScrollRendersPrefixedScrollContainerDemo() {
  return (<DmInfiniteScroll>DuskMoon Dm Infinite Scroll</DmInfiniteScroll>);
}

Preview

DuskMoon Dm Infinite Scroll

Calls next once when ratio threshold is reached

test-backed

DmInfiniteScroll scenario from the component test coverage: calls next once when ratio threshold is reached.

Source

import "@duskmoon-dev/components/styles.css";
import { DmInfiniteScroll } from "@duskmoon-dev/components/dm-infinite-scroll";

export function DmInfiniteScrollCallsNextOnceWhenDemo() {
  return (<DmInfiniteScroll>DuskMoon Dm Infinite Scroll</DmInfiniteScroll>);
}

Preview

DuskMoon Dm Infinite Scroll

Unlocks next when dataLength changes

test-backed

DmInfiniteScroll scenario from the component test coverage: unlocks next when datalength changes.

Source

import "@duskmoon-dev/components/styles.css";
import { DmInfiniteScroll } from "@duskmoon-dev/components/dm-infinite-scroll";

export function DmInfiniteScrollUnlocksNextWhenDataLengthDemo() {
  return (<DmInfiniteScroll>DuskMoon Dm Infinite Scroll</DmInfiniteScroll>);
}

Preview

DuskMoon Dm Infinite Scroll

Supports pixel threshold, inverse mode, custom prefix, and loader

test-backed

DmInfiniteScroll scenario from the component test coverage: supports pixel threshold, inverse mode, custom prefix, and loader.

Source

import "@duskmoon-dev/components/styles.css";
import { DmInfiniteScroll } from "@duskmoon-dev/components/dm-infinite-scroll";

export function DmInfiniteScrollSupportsPixelThresholdInverseDemo() {
  return (<DmInfiniteScroll>DuskMoon Dm Infinite Scroll</DmInfiniteScroll>);
}

Preview

Sunshine Theme

DuskMoon Dm Infinite Scroll

Moonlight Theme

DuskMoon Dm Infinite Scroll

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmInfiniteScroll>DuskMoon Dm Infinite Scroll</DmInfiniteScroll>
</div>

<div data-theme="moonlight">
  <DmInfiniteScroll>DuskMoon Dm Infinite Scroll</DmInfiniteScroll>
</div>

API

The API reference below lists every parsed exported type or interface for DmInfiniteScroll. Start with `id`, `prefix`, `dataLength`, `next` for common usage.

Types: packages/components/src/components/dm-infinite-scroll/DmInfiniteScroll.types.tsScenarios: packages/components/src/components/dm-infinite-scroll/DmInfiniteScroll.test.tsx

DmInfiniteScrollPropsinterface extends Omit< ComponentPropsWithoutRef<"div">, "children" | "onScroll" >

Prop	Type	Required	Description
`id`	`string`	Yes	id configures DmInfiniteScroll.
`prefix`	`string`	No	prefix configures DmInfiniteScroll.
`children`	`ReactNode`	No	children configures DmInfiniteScroll.
`dataLength`	`number`	Yes	dataLength configures DmInfiniteScroll.
`next`	`() => void \| Promise<void>`	Yes	next configures DmInfiniteScroll.
`hasMore`	`boolean`	Yes	hasMore configures DmInfiniteScroll.
`loader`	`ReactNode`	No	loader configures DmInfiniteScroll.
`endMessage`	`ReactNode`	No	endMessage configures DmInfiniteScroll.
`scrollThreshold`	`DmScrollThreshold`	No	scrollThreshold configures DmInfiniteScroll.
`height`	`number \| string`	No	height configures DmInfiniteScroll.
`hasChildren`	`boolean`	No	hasChildren configures DmInfiniteScroll.
`inverse`	`boolean`	No	inverse configures DmInfiniteScroll.
`initialScrollY`	`number`	No	initialScrollY configures DmInfiniteScroll.
`onScroll`	`(event: UIEvent<HTMLDivElement>) => void`	No	onScroll configures DmInfiniteScroll.

DmScrollThresholdtype

number | `${number}px` | string