@publir/publir-react-plugin
TypeScript icon, indicating that this package has built-in type declarations

1.0.6 • Public • Published

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

Usage

Install package

npm install @publir/publir-react-plugin --save
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

<!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.

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.

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i @publir/publir-react-plugin

Weekly Downloads

17

Version

1.0.6

License

none

Unpacked Size

373 kB

Total Files

32

Last publish

Collaborators

  • ramprasad1
  • anandpublir
  • freedomfries
  • davem0n
  • oops365
  • mbednarski
  • nlevo
  • jdpedrie