React Components

Pre-built React components for rendering ads with automatic impression tracking.

Installation

The React components require Tailwind CSS for styling:


npm install notpixel

React 18+ is required as a peer dependency.

Quick Start


import { AdCard, AdBanner } from 'notpixel/react';
import { createTracker } from 'notpixel/browser';
 
// Create tracker for impressions/clicks
const tracker = createTracker({
  baseURL: 'https://api.notpixel.ai',
  publisherId: 'pub_10565',
});
 
function MyComponent({ ad, impressionId }) {
  return (
    <AdCard
      ad={ad}
      impressionId={impressionId}
      tracker={tracker}
      onImpression={() => tracker.impression(impressionId)}
      onClick={() => tracker.click(impressionId)}
    />
  );
}

Components

Both components include Ocultar anúncio and Denunciar anúncio. Hide removes the current display; the same ad can be selected later. Report asks for a reason and optional details, then hides the ad after the server confirms receipt. Pass tracker when using a custom API URL. onHide and onReport notify the host application after each action.

AdCard

Card component for sidebar, embed, or featured placements.

SponsoredOptimize Your DatabaseSpeed up queries by 10x with intelligent indexing and caching.Learn More


<AdCard
  ad={ad}
  impressionId={impressionId}
  onImpression={() => {}}
  onClick={() => {}}
  className="custom-class"
/>

AdBanner

Horizontal banner for header/footer placements.


<AdBanner
  ad={ad}
  impressionId={impressionId}
  onImpression={() => {}}
  onClick={() => {}}
  className="custom-class"
/>

Props

Both components share the same props:

Prop	Type	Required	Description
`ad`	`Ad`	Yes	The ad object from SDK
`impressionId`	`string`	Yes	Impression ID for tracking
`onImpression`	`() => void`	No	Called when ad becomes visible
`onClick`	`() => void`	No	Called when CTA is clicked
`className`	`string`	No	Additional CSS classes

Auto Impression Tracking

Components automatically track impressions using IntersectionObserver:

Tracks when 50% of the ad is visible
Fires onImpression only once per mount
Falls back to immediate tracking if IntersectionObserver unavailable


<AdCard
  ad={ad}
  impressionId={impressionId}
  onImpression={() => {
    // Fires automatically when visible
    tracker.impression(impressionId);
  }}
/>

Full Example

Next.js App Router

app/chat/page.tsx


import Ads from 'notpixel';
import { AdCard } from 'notpixel/react';
import { AdTracker } from './ad-tracker';
 
export default async function ChatPage() {
  const ads = new Ads({
    publisherId: 'pub_10565',
    model: 'openai/gpt-5.2',
    input: 'Recommend tools for a React performance audit.',
  });
 
  // Fetch ad server-side
  const ad = await ads.getAd();
  const impressionId = 'imp_from_backend';
 
  if (!ad) return null;
 
  return (
    <div>
      {/* Chat content */}
      <AdTracker ad={ad} impressionId={impressionId} />
    </div>
  );
}

app/chat/ad-tracker.tsx


'use client';
 
import { AdCard } from 'notpixel/react';
import { createTracker } from 'notpixel/browser';
import type { Ad } from 'notpixel/react';
 
const tracker = createTracker({
  baseURL: 'https://api.notpixel.ai',
  publisherId: 'pub_10565',
});
 
export function AdTracker({ ad, impressionId }: { ad: Ad; impressionId: string }) {
  return (
    <AdCard
      ad={ad}
      impressionId={impressionId}
      onImpression={() => tracker.impression(impressionId)}
      onClick={() => tracker.click(impressionId)}
      className="max-w-sm"
    />
  );
}

Customizing Styles

Override Classes

Add custom Tailwind classes via className:


<AdCard
  ad={ad}
  impressionId={impressionId}
  className="bg-slate-900 text-white border-slate-700"
/>

Default Classes

Components support both light and dark mode via Tailwind’s dark: variant.

AdCard:

Container: rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800/50 dark:bg-gray-950/50
Disclosure: text-xs text-gray-500 uppercase tracking-wide dark:text-gray-400
Headline: text-lg font-semibold text-gray-900 mt-2 dark:text-white
Body: text-sm text-gray-500 mt-1 dark:text-gray-400
CTA: bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white rounded-md

AdBanner:

Container: flex items-center bg-gray-50 border border-gray-200 rounded-xl dark:bg-gray-950/50 dark:border-gray-800/50
Disclosure: text-xs text-gray-500 uppercase dark:text-gray-400
Headline: font-medium text-gray-900 dark:text-white
Body: text-sm text-gray-500 dark:text-gray-400
CTA: bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white rounded-md

Data Attributes

Components include data attributes for custom tracking:


<div data-ad-id="ad-123" data-impression-id="imp-456">
  ...
</div>

TypeScript

Import types from the react entry:


import type { Ad, AdCardProps, AdBannerProps } from 'notpixel/react';