Source: https://primereact.org/deferredcontent/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

DeferredContent

DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.

Import#

import { DeferredContent } from 'primereact/deferredcontent';

Copy

Basic#

DeferredContent is used by wrapping the target.

Scroll down to lazy load an image.

<DeferredContent onLoad={onImageLoad}>
    <img className="w-full md:w-30rem md:block md:mx-auto" src="/images/galleria/galleria3.jpg" alt="Prime" />
</DeferredContent>

Copy

DataTable#

A practical example that loads only when table becomes visible in viewport.

Scroll down to lazy load a DataTable.

<DeferredContent onLoad={onDataLoad}>
    <DataTable value={products}>
        <Column field="code" header="Code"></Column>
        <Column field="name" header="Name"></Column>
        <Column field="category" header="Category"></Column>
        <Column field="quantity" header="Quantity"></Column>
    </DataTable>
</DeferredContent>

Copy

Accessibility#

Screen Reader

DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you have full control over the roles like landmark and attributes like aria-live.

<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
Content
</DeferredContent>

Copy

Keyboard Support

Component does not include any interactive elements.

Import
Basic
DataTable
Accessibility

PrimeReact 10.9.7 by PrimeTek