salla-infinite-scroll

Wraps a paginated list and loads the next page into it, either when the visitor clicks a "Load more" button that it adds after the list, or automatically on scroll. Use it around product, brand, order or comment lists that the server paginates. Set next-page to the URL of the next page; it shows a message when the end is reached and when loading fails.

Nothing is rendered when next-page is empty. The button is a link, so it can be reached and activated with the keyboard.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-infinite-scroll> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaInfiniteScroll } from '@salla.sa/twilight-components-react/infinite-scroll';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

ExampleCopy Anchor Link

import { SallaInfiniteScroll } from '@salla.sa/twilight-components-react/infinite-scroll';

export function Example() {
  return (
    <SallaInfiniteScroll nextPage="/products?page=2" autoload>
      <div className="product">Product 1</div>
      <div className="product">Product 2</div>
    </SallaInfiniteScroll>
  );
}

PropertiesCopy Anchor Link

SlotsCopy Anchor Link