### Install exoclick-react with npm

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/docs/get-started.mdx

Install the exoclick-react library using npm.

```bash
npm install exoclick-react
```

--------------------------------

### Install exoclick-react with yarn

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/docs/get-started.mdx

Install the exoclick-react library using yarn.

```bash
yarn add exoclick-react
```

--------------------------------

### Install exoclick-react SDK

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/README.md

Use npm or yarn to install the exoclick-react package.

```bash
npm install exoclick-react
# or
yarn add exoclick-react
```

--------------------------------

### Web Fullpage Interstitial Example

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/FullpageInterstitial/FullpageInterstitial.mdx

Use this for standard web implementations. It opens on internal links and can be closed by the viewer. This variant is restricted from opening on screens with a height greater than their width (e.g., most mobile phones).

```javascript
import { Playground, Props } from 'docz';
import { FullpageInterstitial } from './FullpageInterstitial';

<Playground>
  <a href="#" onClick={(e) => e.preventDefault()} className="demo-desktop">Click me</a>
  <FullpageInterstitial zoneId={4318792} frequencyType="clicks" firstTriggerClicks={1} nextTriggerClicks={1} triggerClass={['demo-desktop']} />
</Playground>
```

--------------------------------

### Mobile Fullpage Interstitial Example

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/FullpageInterstitial/FullpageInterstitial.mdx

This variant is designed for mobile devices. It opens on internal links and can be closed by the viewer. Unlike the desktop version, it has no restrictions on screen aspect ratio.

```javascript
import { Playground, Props } from 'docz';
import { FullpageInterstitial } from './FullpageInterstitial';

<Playground>
  <a href="#" onClick={(e) => e.preventDefault()} className="demo-mobile">Click me</a>
  <FullpageInterstitial zoneId={4318840} frequencyType="clicks" firstTriggerClicks={1} nextTriggerClicks={1} triggerClass={['demo-mobile']} />
</Playground>
```

--------------------------------

### Import and Use Banner and Outstream Components

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/README.md

Import Banner and Outstream components from the 'exoclick-react' library. Use the Banner component for various banner types and the Outstream component for video ads. Ensure you provide the correct zoneId for each component.

```jsx
import { Banner, Outstream } from "exoclick-react";

// Banner, Mobile Banner and Multi-Format
<Banner zoneId={123} />

// Outstream Video
<Outstream zoneId={123} />
```

--------------------------------

### Sticky Banner Basic Usage

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/StickyBanner/StickyBanner.mdx

Demonstrates the basic implementation of the Sticky Banner component with essential props.

```APIDOC
## Sticky Banner Basic Usage

### Description
This example shows how to use the Sticky Banner component with a zone ID, horizontal and vertical positioning, and a specific format.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```jsx
<StickyBanner zoneId="4294580" horizontalPosition="right" verticalPosition="middle" format="160x600" />
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

--------------------------------

### Placeholder for Outstream Video Ads

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/Placeholder/Placeholder.mdx

Integrate the Placeholder component with ExoClick outstream videos to avoid content shifting as the video player loads. The specified dimensions should accommodate the video player.

```jsx
import { Playground, Props } from 'docz';
import { Banner, Outstream, Placeholder } from "../../index";

<Placeholder width="400" height="266">
  <Outstream zoneId="4176664" maxWidth={400} />
</Placeholder>
```

--------------------------------

### Render Recommendation Widget

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/RecommendationWidget/RecommendationWidget.mdx

Use the RecommendationWidget component to display native ads. Requires a zoneId prop.

```javascript
import { Playground, Props } from 'docz';
import { RecommendationWidget } from "../../index";

# Recommendation Widget
The native advertising offers a fully customizable widget that features images and a short text, title and description.
The native ads are completely responsive across all devices: desktop, mobile and tablet.

<Playground>
  <RecommendationWidget zoneId="3686513" />
</Playground>

## Props

<Props of={RecommendationWidget} />
```

--------------------------------

### Implement Placeholder components

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Wraps ad components to reserve space and prevent Cumulative Layout Shift (CLS) during ad loading.

```jsx
import { Banner, Outstream, Placeholder } from "exoclick-react";

// Placeholder for banner - prevents layout shift
function BannerWithPlaceholder() {
  return (
    <Placeholder width="728" height="90">
      <Banner zoneId="2921652" />
    </Placeholder>
  );
}

// Placeholder for outstream video
function OutstreamWithPlaceholder() {
  return (
    <Placeholder width="400" height="266">
      <Outstream zoneId="4176664" maxWidth={400} />
    </Placeholder>
  );
}

// Multiple ad units with placeholders
function AdLayout() {
  return (
    <div className="ad-container">
      <Placeholder width="300" height="250">
        <Banner zoneId="4295128" />
      </Placeholder>

      <Placeholder width="728" height="90">
        <Banner zoneId="2921652" />
      </Placeholder>
    </div>
  );
}
```

--------------------------------

### Basic Adblock Usage

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/Adblock/Adblock.mdx

Uses a render prop function to display different content based on the blocked state.

```jsx
<Adblock>{({ blocked }) => <span>{blocked ? 'Blocked!' : 'Not blocked'}</span>}</Adblock>
```

--------------------------------

### Adblock Component Usage

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/Adblock/Adblock.mdx

Demonstrates the basic usage of the Adblock component. It accepts a function as a child, which receives an object with a 'blocked' boolean property.

```APIDOC
## Adblock Component
A component to tell if the user has adblock enabled or not.

### Description
This component allows you to check if the user has an adblocker enabled and conditionally render content based on the result.

### Usage

Adblock accepts only one child, which must be a function. This function receives an object containing a `blocked` boolean property. Use this property to determine what to display.

### Request Example
```jsx
<Adblock>{({ blocked }) => <span>{blocked ? 'Blocked!' : 'Not blocked'}</span>}</Adblock>
```

### Response

The child function receives an object with the following property:

#### Success Response
- **blocked** (boolean) - Indicates whether an adblocker is detected.
```

--------------------------------

### Render RecommendationWidget components

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Use for native advertising widgets. Supports basic rendering and advanced traffic segmentation via sub-IDs and keywords.

```jsx
import { RecommendationWidget } from "exoclick-react";

// Basic recommendation widget
function BasicRecommendations() {
  return <RecommendationWidget zoneId="3686513" />;
}

// Recommendation widget with traffic segmentation
function TargetedRecommendations() {
  return (
    <RecommendationWidget
      zoneId="3686513"
      sub={123456}
      sub2={789012}
      sub3={345678}
      keywords={["news", "trending", "lifestyle"]}
    />
  );
}
```

--------------------------------

### Configured Outstream Video

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Customize outstream video ads with options like maxWidth, frequency capping, branding, and traffic segmentation. Ensure the zoneId is correctly set.

```jsx
import { Outstream } from "exoclick-react";

// Outstream with all options configured
function ConfiguredOutstream() {
  return (
    <Outstream
      zoneId="4176664"
      maxWidth={400}           // Maximum width in pixels
      frequency={30}           // Stay hidden for 30 minutes after close
      branding={true}          // Show "Powered by ExoClick"
      sub={123456}
      keywords={["video", "entertainment"]}
    />
  );
}
```

--------------------------------

### Basic Outstream Video

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Implement basic outstream video ads using the Outstream component. The video plays automatically when viewable and pauses when out of view.

```jsx
import { Outstream } from "exoclick-react";

// Basic outstream video
function BasicOutstream() {
  return <Outstream zoneId="4176664" />;
}
```

--------------------------------

### Placeholder for Banner Ads

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/Placeholder/Placeholder.mdx

Use the Placeholder component with ExoClick banners to reserve space and prevent layout shift while the banner loads. Ensure the width and height match the banner's dimensions.

```jsx
import { Playground, Props } from 'docz';
import { Banner, Outstream, Placeholder } from "../../index";

<Placeholder width="728" height="90">
  <Banner zoneId="2921652" />
</Placeholder>
```

--------------------------------

### Mobile Banner with Traffic Segmentation

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Configure a mobile banner with traffic segmentation using sub and keywords props. This allows for targeted ad delivery.

```jsx
import { Banner } from "exoclick-react";

// Mobile banner with traffic segmentation
function MobileBanner() {
  return (
    <Banner
      zoneId="4295128"
      sub={123456}
      sub2={789012}
      keywords={["gaming", "mobile", "apps"]}
    />
  );
}
```

--------------------------------

### Basic Web Banner

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Use the Banner component to display classic display banners. Ensure you provide a valid zoneId.

```jsx
import { Banner } from "exoclick-react";

// Basic web banner
function WebBanner() {
  return <Banner zoneId="2921652" />;
}
```

--------------------------------

### Sticky Banner Props

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/StickyBanner/StickyBanner.mdx

Lists and describes the available props for customizing the Sticky Banner component.

```APIDOC
## Sticky Banner Props

### Description
This section details the available props for the Sticky Banner component, allowing for customization of its behavior and appearance.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```jsx
<Props of={StickyBanner} />
```

### Response
#### Success Response (200)
N/A (Component Props Documentation)

#### Response Example
N/A (Component Props Documentation)
```

--------------------------------

### Basic Outstream Usage

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/Outstream/Outstream.mdx

Displays an Outstream video ad with a specified zone ID and maximum width.

```jsx
<Outstream zoneId="4176664" maxWidth={400} />
```

--------------------------------

### Configure common ad component props

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Defines the interface for shared ad properties and demonstrates a fully configured banner component.

```typescript
// Common base props shared by Banner, Outstream, FullpageInterstitial,
// StickyBanner, and RecommendationWidget
interface BaseProps {
  // Required: Zone identifier from ExoClick dashboard
  zoneId: string | number;

  // Optional: Custom IDs for traffic segmentation (6-10 digits, no leading zeros)
  sub?: string | number;
  sub2?: string | number;
  sub3?: string | number;

  // Optional: Keywords for advertiser targeting
  keywords?: string[];
}

// Example using all base props
import { Banner } from "exoclick-react";

function FullyConfiguredBanner() {
  return (
    <Banner
      zoneId="2921652"
      sub={123456}
      sub2={789012}
      sub3={345678}
      keywords={["gaming", "technology", "entertainment"]}
    />
  );
}
```

--------------------------------

### Top-Left Sticky Banner

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Implement a sticky banner fixed to the top-left corner of the screen. Ensure the zoneId and format are correctly specified.

```jsx
import { StickyBanner } from "exoclick-react";

// Top-left sticky banner
function TopLeftStickyBanner() {
  return (
    <StickyBanner
      zoneId="4294580"
      format="300x250"
      horizontalPosition="left"
      verticalPosition="top"
    />
  );
}
```

--------------------------------

### Basic usage of StickyBanner

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/StickyBanner/StickyBanner.mdx

Displays a sticky banner with specified positioning and format. Requires a valid zoneId.

```jsx
<StickyBanner zoneId="4294580" horizontalPosition="right" verticalPosition="middle" format="160x600" />
```

--------------------------------

### Desktop Interstitial with Click-Based Frequency

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Set up a click-based fullpage interstitial that triggers after a specified number of clicks on designated elements. Use triggerClass to link the interstitial to specific HTML elements.

```jsx
import { FullpageInterstitial } from "exoclick-react";

// Click-based interstitial (web)
function DesktopInterstitial() {
  return (
    <>
      <a href="/next-page" className="trigger-link">
        Click to continue
      </a>
      <FullpageInterstitial
        zoneId={4318792}
        frequencyType="clicks"
        firstTriggerClicks={1}    // Show after 1st click
        nextTriggerClicks={3}     // Then after every 3 clicks
        triggerClass={["trigger-link"]}
      />
    </>
  );
}
```

--------------------------------

### Use ExoClick Banner component in React

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/docs/get-started.mdx

Import and use the Banner component from exoclick-react in your React application. Ensure you have a valid zoneId from ExoClick.

```jsx
import { Banner } from "exoclick-react";

<Banner zoneId={123} />
```

--------------------------------

### Display Regular Web Banner

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/Banner/Banner.mdx

Use this component to display classic web banners in various standard sizes. Ensure you provide a valid zoneId.

```jsx
import { Playground, Props } from 'docz';
import { Banner } from '../../index';

<Playground>
  <Banner zoneId="2921652" />
</Playground>
```

--------------------------------

### Detect ad blockers with Adblock component

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Uses a render prop pattern to conditionally display content or styles based on the user's ad blocking status.

```jsx
import { Adblock, Banner } from "exoclick-react";

// Basic adblock detection
function AdblockStatus() {
  return (
    <Adblock>
      {({ blocked }) => (
        <span>{blocked ? "Ad blocker detected" : "No ad blocker"}</span>
      )}
    </Adblock>
  );
}

// Show alternative content when ads are blocked
function AdWithFallback() {
  return (
    <Adblock>
      {({ blocked }) => (
        blocked ? (
          <div className="support-message">
            Please consider disabling your ad blocker to support our content.
          </div>
        ) : (
          <Banner zoneId="2921652" />
        )
      )}
    </Adblock>
  );
}

// Conditional styling based on adblock status
function AdblockAwareLayout() {
  return (
    <Adblock>
      {({ blocked }) => (
        <div className={blocked ? "layout-no-ads" : "layout-with-ads"}>
          {!blocked && <Banner zoneId="2921652" />}
          <main>Your main content here</main>
        </div>
      )}
    </Adblock>
  );
}
```

--------------------------------

### Fullpage Interstitial (Web)

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/FullpageInterstitial/FullpageInterstitial.mdx

The classic Full Page Interstitial for web. It opens on internal links and can be closed by the viewer. It is triggered once per zone and does not open if the screen height is greater than its width (typical for most mobile phones).

```APIDOC
## Fullpage Interstitial (Web)

### Description
Classic Full Page Interstitial: horizontal. Opens on internal link and can be closed by viewer. It can be triggered once per zone. This type does not open if the screen is higher than it is tall, i.e., most mobile phones.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Request Body
- **zoneId** (number) - Required - The ID of the zone for the interstitial.
- **frequencyType** (string) - Required - The type of frequency capping (e.g., 'clicks').
- **firstTriggerClicks** (number) - Required - The number of clicks to trigger the interstitial for the first time.
- **nextTriggerClicks** (number) - Required - The number of subsequent clicks to re-trigger the interstitial.
- **triggerClass** (array of strings) - Required - CSS classes that trigger the interstitial when clicked.

### Request Example
```json
{
  "zoneId": 4318792,
  "frequencyType": "clicks",
  "firstTriggerClicks": 1,
  "nextTriggerClicks": 1,
  "triggerClass": ["demo-desktop"]
}
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

--------------------------------

### Display Multi-Format Banner

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/Banner/Banner.mdx

Use this component to display multiple ad zones with different formats within a single zone. This allows for flexible ad competition or grid layouts. Provide the relevant zoneId.

```jsx
import { Playground, Props } from 'docz';
import { Banner } from '../../index';

<Playground>
  <Banner zoneId="4282786" />
</Playground>
```

--------------------------------

### Sidebar Sticky Banner

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Create a sticky banner positioned on the right-middle of the screen, suitable for sidebar ad placements. Customize format, position, and traffic segmentation.

```jsx
import { StickyBanner } from "exoclick-react";

// Right-middle sticky banner (sidebar style)
function SidebarStickyBanner() {
  return (
    <StickyBanner
      zoneId="4294580"
      format="160x600"
      horizontalPosition="right"
      verticalPosition="middle"
      sub={123456}
      keywords={["sidebar", "display"]}
    />
  );
}
```

--------------------------------

### Bottom-Center Sticky Banner

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Display a sticky banner fixed to the bottom-center of the screen. Specify the desired format and zoneId.

```jsx
import { StickyBanner } from "exoclick-react";

// Bottom-center sticky banner (default position)
function BottomStickyBanner() {
  return (
    <StickyBanner
      zoneId="4294580"
      format="728x90"
    />
  );
}
```

--------------------------------

### Mobile Interstitial with Time-Based Frequency

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Configure a time-based fullpage interstitial for mobile, controlling how often it appears within a given period. Ensure frequencyCount and frequencyPeriod are set appropriately.

```jsx
import { FullpageInterstitial } from "exoclick-react";

// Mobile interstitial with time-based frequency
function MobileInterstitial() {
  return (
    <>
      <a href="/content" className="mobile-link">
        View content
      </a>
      <FullpageInterstitial
        zoneId={4318840}
        frequencyType="time"
        frequencyCount={2}        // Show 2 times
        frequencyPeriod={720}     // Per 12 hours (720 minutes)
      />
    </>
  );
}
```

--------------------------------

### Fullpage Interstitial (Mobile)

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/FullpageInterstitial/FullpageInterstitial.mdx

The Full Page Interstitial specifically designed for mobile devices. It opens on internal links and can be closed by the viewer. Unlike the desktop version, the mobile version has no restrictions on screen aspect ratio.

```APIDOC
## Fullpage Interstitial (Mobile)

### Description
Mobile Full Page Interstitial: Opens on internal link and closed by viewer. Unlike the desktop variant, the mobile version has no restrictions on the screen ratio.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Request Body
- **zoneId** (number) - Required - The ID of the zone for the interstitial.
- **frequencyType** (string) - Required - The type of frequency capping (e.g., 'clicks').
- **firstTriggerClicks** (number) - Required - The number of clicks to trigger the interstitial for the first time.
- **nextTriggerClicks** (number) - Required - The number of subsequent clicks to re-trigger the interstitial.
- **triggerClass** (array of strings) - Required - CSS classes that trigger the interstitial when clicked.

### Request Example
```json
{
  "zoneId": 4318840,
  "frequencyType": "clicks",
  "firstTriggerClicks": 1,
  "nextTriggerClicks": 1,
  "triggerClass": ["demo-mobile"]
}
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

--------------------------------

### Multi-Format Banner

Source: https://context7.com/tomhooijenga/exoclick-react/llms.txt

Display a Multi-Format banner by providing the corresponding zoneId. This format combines multiple ad types.

```jsx
import { Banner } from "exoclick-react";

// Multi-Format banner (combines multiple ad formats)
function MultiFormatBanner() {
  return <Banner zoneId="4282786" />;
}
```

--------------------------------

### Display Mobile Banner

Source: https://github.com/tomhooijenga/exoclick-react/blob/master/src/components/Banner/Banner.mdx

Use this component to display banners optimized for mobile screen sizes. Provide the appropriate zoneId for mobile ads.

```jsx
import { Playground, Props } from 'docz';
import { Banner } from '../../index';

<Playground>
  <Banner zoneId="4295128" />
</Playground>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.