📢 react-7searchppc-ads

A lightweight React component library for rendering ads from 7SearchPPC. Easily integrate Banner Ads, Text Ads, Native Ads, and InPage Push Ads in your React apps using a single line of code.

📦 Installation

npm install react-7searchppc-ads
🚀 How to Use (Step-by-Step)
1. Import the Component(s)
You can use specific ad types or a dynamic renderer.
// Import individual ad components
import {
  BannerAd,
  TextAd,
  NativeAd,
  InPagePushAd,
  AdRenderer
} from 'react-7searchppc-ads';
2. Use in Your App
✅ Option 1: Specific Ad Component
jsx
Copy
Edit
function App() {
  return (
    <div>
      <h2>Banner Ad</h2>
      <BannerAd adUnitId="XXXXXX00000001" />

      <h2>Text Ad</h2>
      <TextAd adUnitId="XXXXXXX000000001" />

      <h2>Native Ad</h2>
      <NativeAd adUnitId="XXXXXXXX0000001" />

      <h2>InPage Push Ad</h2>
      <InPagePushAd adUnitId="XXXXXXXE0000001" />
    </div>
  );
}
✅ Option 2: Dynamic AdRenderer
jsx
Copy
Edit
function App() {
  return (
    <div>
      <h2>Text Ad Rendered Dynamically</h2>
      <AdRenderer adUnitId="XXXXXXXXX0001" adType="text" />

      <h2>Banner Ad Rendered Dynamically</h2>
      <AdRenderer adUnitId="XXXXXXX0000000001" adType="banner" />
    </div>
  );
}

props
| Prop       | Type     | Description                                                                        |
| ---------- | -------- | ---------------------------------------------------------------------------------- |
| `adUnitId` | `string` | Required – Unique ID of the ad                                                     |
| `adType`   | `string` | Required for `AdRenderer`. Can be `'text'`, `'banner'`, `'native'`, `'inpagepush'` |

| Type        | Component          | Description                           |
| ----------- | ------------------ | ------------------------------------- |
| Banner      | `<BannerAd />`     | Simple image-based banner ad          |
| Text        | `<TextAd />`       | Headline with ad description          |
| Native      | `<NativeAd />`     | Image, title, and content-like format |
| InPage Push | `<InPagePushAd />` | Push-style floating notification ads  |
| All-in-One  | `<AdRenderer />`   | Dynamic ad renderer using props       |

---

### ✅ To Use This in Your Package

1. Save this content in a file named `README.md` in your package root.
2. Make sure it's included in your `npm publish`:
   - You **don't need to add it to `.npmignore`** — npm includes `README.md` by default.
3. Test by running:
   ```bash
   npm pack