DocsDocsSDKs

InfiniteScroll

React SDK guidance for InfiniteScroll.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use InfiniteScroll when a listing page should progressively load more content as the visitor scrolls rather than using numbered pagination. It works well for product grids, editorial feeds, and search results where browsing momentum matters more than jumping to a specific page.

If the visitor needs to jump to specific pages or the dataset is very large, use Pagination instead. If the content set is small and fits on one page, neither is needed.

Composition notes

InfiniteScroll wraps your list content as children:

  • children is the rendered list (a product grid, editorial feed, etc.).
  • onLoadMore fires when the sentinel reaches the viewport (automatic mode) or when the button is clicked (manual mode).
  • hasMore tells the component whether more content is available. When false, the end indicator shows instead.
  • loading shows the loading indicator while the next page is being fetched.
  • showLoadMoreButton switches from automatic viewport-triggered loading to a manual button. Use this for accessibility or when automatic loading would interfere with footer access.
  • threshold controls how early the sentinel triggers relative to the viewport edge (IntersectionObserver rootMargin).
  • loadingIndicator and endIndicator are ReactNode slots for custom loading and end-of-list UI.

Automatic vs manual loading

Automatic loading is better for browsing-heavy flows (product grids, feeds). Manual loading is better for pages with important footer content or for accessibility, since screen readers can navigate past the button.

Behavior and theming guidance

The automatic sentinel uses IntersectionObserver with a configurable threshold (default "200px"). This lets the next page begin loading before the visitor reaches the bottom.

The manual load-more button renders centered below the content with the loadMoreLabel text. It disables during loading to prevent double-fetches.

When hasMore becomes false, the endIndicator renders in place of the sentinel or button. Use a short message like "All products loaded" or a subtle visual divider.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/storefront.
  • Playground route: /sandbox?component=InfiniteScroll.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

InfiniteScroll

# InfiniteScroll > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/storefront`. - Live playground: [/components/commerce/infinite-scroll](https://sdk.enad.io/components/commerce/infinite-scroll). ## When to use it Use `InfiniteScroll` when a listing page should progressively load more content as the visitor scrolls rather than using numbered pagination. It works well for product grids, editorial feeds, and search results where browsing momentum matters more than jumping to a specific page. If the visitor needs to jump to specific pages or the dataset is very large, use `Pagination` instead. If the content set is small and fits on one page, neither is needed. ## Composition notes InfiniteScroll wraps your list content as children: - **`children`** is the rendered list (a product grid, editorial feed, etc.). - **`onLoadMore`** fires when the sentinel reaches the viewport (automatic mode) or when the button is clicked (manual mode). - **`hasMore`** tells the component whether more content is available. When false, the end indicator shows instead. - **`loading`** shows the loading indicator while the next page is being fetched. - **`showLoadMoreButton`** switches from automatic viewport-triggered loading to a manual button. Use this for accessibility or when automatic loading would interfere with footer access. - **`threshold`** controls how early the sentinel triggers relative to the viewport edge (IntersectionObserver rootMargin). - **`loadingIndicator`** and **`endIndicator`** are ReactNode slots for custom loading and end-of-list UI. > **Automatic vs manual loading** > > Automatic loading is better for browsing-heavy flows (product grids, feeds). Manual loading is > better for pages with important footer content or for accessibility, since screen readers can > navigate past the button. ## Behavior and theming guidance The automatic sentinel uses IntersectionObserver with a configurable `threshold` (default `"200px"`). This lets the next page begin loading before the visitor reaches the bottom. The manual load-more button renders centered below the content with the `loadMoreLabel` text. It disables during loading to prevent double-fetches. When `hasMore` becomes false, the `endIndicator` renders in place of the sentinel or button. Use a short message like "All products loaded" or a subtle visual divider. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/storefront`. - Playground route: /sandbox?component=InfiniteScroll. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes