# react-dfp-slot

> React based DFP library

Latest version **0.0.11** (published 2017-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dfp-slot
pnpm add react-dfp-slot
yarn add react-dfp-slot
bun add react-dfp-slot
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2017-10-11 |
| First published | 2017-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.2.4 |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Hwrdy |
| Maintainers | hwrdy |
| Keywords | ad unit, adunit, advertising, babel, dfp, doubleclick, es6, gpt, google dfp, react, react dfp, react-component |

## Links

- npm: https://www.npmjs.com/package/react-dfp-slot
- Repository: https://github.com/Hwrdy/react-dfp-slot
- Homepage: https://github.com/Hwrdy/react-dfp-slot#readme
- Issues: https://github.com/Hwrdy/react-dfp-slot/issues
- npm.io page: https://npm.io/package/react-dfp-slot

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^15.6.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1
- [prop-types](https://npm.io/package/prop-types.md) >= 15.5.10
- [react-waypoint](https://npm.io/package/react-waypoint.md) >= 7.0.0
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) >= 4.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.11 (latest) — 2017-10-11
- 0.0.10 — 2017-10-11
- 0.0.9 — 2017-09-26
- 0.0.8 — 2017-09-24
- 0.0.7 — 2017-09-24
- 0.0.6 — 2017-09-23
- 0.0.5 — 2017-09-23
- 0.0.4 — 2017-08-03
- 0.0.3 — 2017-08-02
- 0.0.2 — 2017-08-01
- 0.0.1 — 2017-07-30

## README

# react-dfp-slot
[![npm version](https://badge.fury.io/js/react-dfp-slot.svg)](http://badge.fury.io/js/react-dfp-slot)

A React component library to execute Google DFP logic.


## Getting started

1. Install package

	```bash
	yarn add react-dfp-slot
	```

	or

	```bash
	npm install react-dfp-slot
	```

2. Set the DFP provider

	```jsx
	// App.js
	import { DFPProvider } from 'react-dfp-slot';

	render() {
	  return (
	    <DFPProvider>
	      <section className={appClassName}>
	        ...
	      </section>
	    </DFPProvider>
	  );
	}

	```

3. Add AdSlot component with profile

	```jsx
	import { AdSlot } from 'react-dfp-slot';

	class SomeComponent extends Component {
	  ...
	  render() {
	    return (
	      <section className="some-component-main">
	        ...
	        <AdSlot
	          profile={{
	            path: '/1000000/adunit',
	            size: ['fluid'],
	            waitingFor: 'detail',
	            hideOnInitial: true,
	            className: 'native-style',
	          }}
	        />
	      </section>
	    );
	  }
	}
	```


## DFPProvider

### Child context

```jsx
  getChildContext() {
    return {
      getIsSlotAdReady: this.getIsSlotAdReady,
      setIsSlotAdReady: this.setIsSlotAdReady,
      getIsComponentMounted: this.getIsComponentMounted,
      setIsComponentMounted: this.setIsComponentMounted,
      refreshAds: this.refreshAds,
      clearAdSlots: this.clearAdSlots,
    };
  }
```

#### getIsSlotAdReady(slotName)
Get target slot is ready to display or not

- slotName (string): target slot name

#### setIsSlotAdReady(slotName, isReady)
Set target slot is ready to display or not

- slotName (string): target slot name
- isReady (bool)

#### getIsComponentMounted(complonentName)
Get target component is mounted or not

- componentName (string): target component name

#### setIsComponentMounted(complonentName, doRefreshAd)
Set target component is mounted or not

- componentName (string): target component name
- doRefreshAd (bool)

#### refreshAds()
Refresh all unrefreshed slots

#### clearAds()
Clear all unrefreshed slots

---

### Props
```jsx
propTypes: {
  /**
   * Enables or disables collapsing of slot divs so that they don't
   * take up any space on the page when there is no ad content to display.
   */
  collapseEmptyDivs: ProTypes.bool,

  /**
   * Event handler for slotRenderEnded event.
   */
  onSlotRenderEnded: PropTypes.func,
},
```

#### onSlotRenderEnded(provider, event)

- provider: child context from DFPProvider
- event: [GPT event](https://developers.google.com/doubleclick-gpt/reference#googletageventsslotrenderendedevent)


```js
// example
handleSlotRenderEnded = (provider, event) => {
    const adElement = document.getElementById(`${event.slot.getSlotElementId()}-container`);

    switch (event.slot.getAdUnitPath()) {
      case AdProfiles.idleBannerCenter.path: {
        provider.setIsSlotAdReady(AdProfiles.idleBannerCenter.name, !event.isEmpty);
        break;
      }
      default:
        break;
    }

    if (event.isEmpty && adElement) {
      adElement.style.display = 'block';
    }
};
```


## AdSlot

### Props
```js
  // [300, 250], [[300, 250], 'fluid'], ['fluid]
  const SIZE_TYPE = PropTypes.arrayOf(
    PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.string, PropTypes.number]),
  );


  /* if responsive break point is [0, 0] and [1300, 0] ([width, height])
  [
    [
      [0,0],
      [[1, 1], [650, 60], 'fluid'],
    ],
    [
      [1300, 0],
      [[1, 1], [800, 60], 'fluid']
    ]
  ]
  */
  const MULTI_SIZE_TYPE = PropTypes.arrayOf(PropTypes.arrayOf(AD_SIZE_TYPE));


  const ProfilePropType = PropTypes.shape({
    path: PropTypes.string,           // DFP code
    name: PropTypes.string,           // slot name
    size: SIZE_TYPE,                  // slot size
    multiSize: MULTI_SIZE_TYPE,       // responsive size mapping
    multiSizeHandler: PropTypes.func, // responsive handler
    waitingFor: PropTypes.string,     // refresh ads after component didmount
    hideOnInitial: PropTypes.bool,    // set display: none; on initial
  });

  propTypes: {
    // Profile data for slot
    profile: ProfilePropType.isRequired,

    // class name
    className: PropTypes.string,

    // Init slot after specific millisecond
    asyncInit: PropTypes.number,

    // use lazyLoading mode
    lazyLoading: PropTypes.bool,

    /**
     * `topOffset` can either be a number, in which case its a distance from the
     * top of the container in pixels, or a string value. Valid string values are
     * of the form "20px", which is parsed as pixels, or "20%", which is parsed
     * as a percentage of the height of the containing element.
     * For instance, if you pass "-20%", and the containing element is 100px tall,
     * then the waypoint will be triggered when it has been scrolled 20px beyond
     * the top of the containing element.
     */
    lazyLoadingTopOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

    /**
     * `bottomOffset` is like `topOffset`, but for the bottom of the container.
     */
    lazyLoadingBottomOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

    // DFP setTargeting
    targetValue: PropTypes.arrayOf(PropTypes.string),

  },
```

---
_Source: https://npm.io/package/react-dfp-slot · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._