Getting Started Guide

A guide to get started with @apisurf/react-ad-preview

Last updated: December 17, 2025

Introduction

The @apisurf/react-ad-preview library allows you to visualize how your ad content appears across different platform ad formats.

It covers platform ad previews for: Meta, Google, Bing, X, TikTok, YouTube, Reddit, Pinterest, Snapchat and more.

Installation

Install the package using your preferred package manager:

npm install @apisurf/react-ad-preview

Or with pnpm:

pnpm add @apisurf/react-ad-preview

Or with yarn:

yarn add @apisurf/react-ad-preview

Usage

Import the component you need and use it in your JSX:

import { AdGoogle } from "@apisurf/react-ad-preview";

<AdGoogle
  url="https://luxuryhomesflorida.com"
  headlines={[
    "Luxury Homes Florida",
    "Find Your Dream Waterfront Property",
    "Expert Real Estate Consultants",
  ]}
  description={[
    "Discover exclusive waterfront properties in South Florida. From Miami Beach to Palm Beach Gardens, find your perfect luxury home with our award-winning real estate team.",
    "Premium listings starting from $1.2M. Schedule a private viewing today. Virtual tours available for international buyers.",
    "Over 20 years of experience in luxury real estate. Full-service property management and concierge services available.",
  ]}
  sitelink={[
    "View Featured Listings",
    "Schedule Viewing",
    "Meet Our Team",
    "Property Management",
  ]}
/>

Available Components

The library provides ad preview components for the following platforms:

Search Ads

  • AdGoogle - Google Search Ads
  • AdBing - Bing Search Ads

Social Media Ads

  • AdFbFeed - Facebook Feed Ads
  • AdFbBusinessExplore - Facebook Business Explore Ads
  • AdIgFeed - Instagram Feed Ads
  • AdIgProfileFeed - Instagram Profile Feed Ads
  • AdMetaReel - Meta Reel Ads
  • AdMetaStory - Meta Story Ads
  • AdLinkedIn - LinkedIn Ads
  • AdReddit - Reddit Ads
  • AdPinterestImage - Pinterest Image Ads
  • AdPinterestVideo - Pinterest Video Ads
  • AdSnapchat - Snapchat Ads
  • AdTikTokTakeover - TikTok Takeover Ads
  • AdTikTokTopview - TikTok Topview Ads
  • AdXApp - X (Twitter) App Ads
  • AdXWebsite - X (Twitter) Website Ads

Video Ads

  • AdYoutube - YouTube Video Ads
  • AdYoutubePlayer - YouTube Player Ads

Connected TV (CTV) Ads

  • AdHuluCtv - Hulu CTV Ads
  • AdMountainCTV - Mountain CTV Ads
  • AdTatariCtv - Tatari CTV Ads

Explore the examples section to see each component in action with sample code.

Edit on GitHub
Was this helpful?