npm package: @monetumo/react-ad-component
Description: React component for loading and displaying ads
Latest version: 0.1.18

# Monetumo React Ad Component

A React component for displaying ads with Google Publisher Tags (GPT) and Prebid.js integration. Designed for easy integration with remote configuration support.

## Installation

```bash
npm install @monetumo/react-ad-component
```

## Features

- 🚀 **Lazy loading** with Intersection Observer
- 📱 **Responsive** ad sizes via remote configuration
- 🔄 **Auto-refresh** capability
- 🎯 **GPT & Prebid.js** integration
- ⚡ **TypeScript** support
- 🌐 **Remote configuration** driven

## Basic Usage

```jsx
import { MonetumoAdSlot } from '@monetumo/react-ad-component';

function MyComponent() {
  return (
    <MonetumoAdSlot
      prefix="23169492389/DK"
      adUnit="mpu_atf_listings"
      refreshInterval={30000}
      onLoad={() => console.log('Ad loaded')}
      onError={(error) => console.error('Ad error:', error)}
    />
  );
}
```

## Advanced Usage

```jsx
import { MonetumoAdSlot } from '@monetumo/react-ad-component';

function MyComponent() {
  return (
    <MonetumoAdSlot
      prefix="23169492389/DK"
      adUnit="banner_top"
      sizes={[[728, 90], [970, 250]]} // Optional size override
      label="Advertisement"
      className="my-custom-ad-class"
      refreshInterval={60000}
      onLoad={() => console.log('Ad loaded successfully')}
      onError={(error) => console.error('Ad failed to load:', error)}
    />
  );
}
```

## Sticky Footer Ad

The package also includes a specialized sticky footer ad component:

```jsx
import { StickyFooterAd } from '@monetumo/react-ad-component';

function App() {
  return (
    <div>
      {/* Your app content */}
      
      <StickyFooterAd
        prefix="23169492389/DK"
        adUnit="sticky_footer"
        disabledRoutes={['/privacy', '/terms']}
        autoHideAfter={30000} // Auto-hide after 30 seconds
        onClose={() => console.log('Sticky ad closed')}
      />
    </div>
  );
}
```

### StickyFooterAd Props

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `prefix` | `string` | `"23169492389/DK"` | Ad unit prefix |
| `adUnit` | `string` | `"sticky_footer"` | Ad unit identifier |
| `sizes` | `[number, number][]` | Optional | Ad size override |
| `disabledRoutes` | `string[]` | `[]` | Routes where the ad shouldn't appear |
| `onClose` | `() => void` | Optional | Callback when user closes the ad |
| `autoHideAfter` | `number` | Optional | Auto-hide after X milliseconds |

## Configuration Options

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `prefix` | `string` | Required | The prefix for your ad unit path (e.g., "23169492389/DK") |
| `adUnit` | `string` | Required | The ad unit identifier |
| `sizes` | `[number, number][]` | Optional | Ad size override (uses remote config if not provided) |
| `label` | `string` | `"Advertisement"` | Label displayed above the ad |
| `className` | `string` | `""` | Additional CSS class names |
| `refreshInterval` | `number` | `30000` | Auto-refresh interval in milliseconds |
| `onLoad` | `() => void` | Optional | Callback when ad loads successfully |
| `onError` | `(error: Error) => void` | Optional | Callback when ad fails to load |

## Remote Configuration

The component primarily uses remote configuration for ad sizes and settings via `window.monetumoRemoteSettings`:

```javascript
window.monetumoRemoteSettings = {
  slotSizes: {
    "banner_top": {
      "xs": [[320, 50]],
      "sm": [[728, 90]],
      "lg": [[970, 250]]
    }
  },
  tealPlacementPrefix: "your-prefix-"
};
```

## Prerequisites

Ensure that Google Publisher Tags (GPT) and Prebid.js are loaded in your application before using this component. These should typically be loaded in your application's head section.

## TypeScript Support

The component includes full TypeScript definitions. Import types as needed:

```typescript
import { MonetumoAdSlot } from '@monetumo/react-ad-component';

type AdSize = [number, number];

interface MyAdProps {
  adUnit: string;
  customSizes?: AdSize[];
}
```

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Publish to npm
npm publish
```

## License

MIT