React SDK

Dynamic content with incremental showAds

Infinite-scroll feeds and "load more" buttons mount new <EzoicAd> components after the initial page load. The SDK requests ads for only the newly-mounted ids, not the whole page again.

What this demonstrates

Every <EzoicAd> mount is batched per React commit into one showAds([...newIds]) call, whether that commit happens on initial render or later in response to a "load more" click / intersection observer. Existing placements already on the page are left untouched — the SDK never re-requests ids that already filled or are already in-flight.

View source on GitHub →

SDK docs: README — Display ads

Component usage

import { useState } from 'react';
import { EzoicAd } from '@ezoic/react-sdk';

function Feed() {
  const [items, setItems] = useState([915]);
  return (
    <>
      {items.map((id) => (
        <EzoicAd key={id} id={id} sizes={['300x250']} required />
      ))}
      <button onClick={() => setItems((ids) => [...ids, 915 + ids.length])}>
        Load more
      </button>
    </>
  );
}

Live demo

The panel below embeds the SDK's own demo app (built from @ezoic/react-sdk v1.0.0) — use its "Dynamic content" panel to add new placements and watch the event log record the incremental showAds call. Open the full demo in a new tab →