open-index/open-npm huggingface dataset:
npm package: @publir/publir-react-plugin
Description: A typescript library for displaying ads in React applications based on config provided by Publir.
Latest version: 1.0.6

A typescript library for displaying ads in React applications based on config provided by Publir.

# Usage 
## Install package

```bash
npm install @publir/publir-react-plugin --save
```

```bash
yarn add @publir/publir-react-plugin
```

**Note:** Your React version should be at least version 17.0.2. Older versions of React are not supported.

## Include external library

You need to include `Prebid.js` library

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script
      type="text/javascript"
      src="http://cdn.jsdelivr.net/npm/prebid.js@7.13/dist/not-for-prod/prebid.js"
    ></script>
  </head>
  <body>
    <!-- App code -->
  </body>
</html>
```

**Important:** In the example above, a non-production version of the Prebid.js library was used. It's not recommended to use it in production environment. We recommend to replace source to Prebid.js library by delivered by Publir platform which should contain only necessary bidder adapters. 


## Use PublirAdsProvider
The `PublirAdsProvider` does take a `publisherId` via prop and based on provided value make a request for Prebid configuration to Publir platform. Config will be passed to `AdSlot` component via context API.

```jsx
import { PublirAdsProvider } from '@publir/publir-react-plugin';
import App from './App';

const Page = () => {
  return (
    <PublirAdsProvider publisherId="1">
      <App />
    </PublirAdsProvider>
  )
}
```

`@publir/publir-react-plugin` is written in TypeScript with complete definitions.

## Use AdSlot

The AdSlot component does take an `id` via prop, it corresponds to the IDs in your configuration.
Component will render an ad based on Prebid response. To make your Prebid config accessible in `AdSlot` component, you need to wrap page content with `PublirAdsProvider`.


```jsx
import { PublirAdsProvider, AdSlot } from '@publir/publir-react-plugin';

const Page = () => {
  return (
    <PublirAdsProvider publisherId="1">
      <AdSlot id="1" />
    </PublirAdsProvider>
  )
}
```