A typescript library for displaying ads in React applications based on config provided by Publir.
Usage
Install package
npm install @publir/publir-react-plugin --saveyarn add @publir/publir-react-pluginNote: 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>
)
}