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-xxx',
});
 
function MyComponent({ ad, impressionId }) {
  return (
    <AdCard
      ad={ad}
      impressionId={impressionId}
      onImpression={() => tracker.impression(impressionId)}
      onClick={() => tracker.click(impressionId)}
    />
  );
}

Components

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-xxx' });
 
  // Fetch ad server-side
  const ad = await ads.getAd({ input: 'user query here' });
  const impressionId = ads.lastImpressionId;
 
  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-xxx',
});
 
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';