{"id":13715458,"url":"https://github.com/jaanauati/react-dfp","last_synced_at":"2025-04-04T13:10:48.496Z","repository":{"id":38106835,"uuid":"58815512","full_name":"jaanauati/react-dfp","owner":"jaanauati","description":"A React implementation of the Google DFP/GPT api. https://react-dfp.surge.sh","archived":false,"fork":false,"pushed_at":"2024-07-16T16:12:25.000Z","size":2032,"stargazers_count":127,"open_issues_count":44,"forks_count":53,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T12:07:35.853Z","etag":null,"topics":["advertising","dfp","es6","gpt","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaanauati.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-14T15:35:58.000Z","updated_at":"2024-03-07T18:28:50.000Z","dependencies_parsed_at":"2023-02-01T06:45:43.986Z","dependency_job_id":"7c2a4960-a133-4083-990a-84096f36f9e9","html_url":"https://github.com/jaanauati/react-dfp","commit_stats":{"total_commits":182,"total_committers":23,"mean_commits":7.913043478260869,"dds":"0.25274725274725274","last_synced_commit":"e5b46729e1b92178027008c849440f15fb0edde6"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaanauati%2Freact-dfp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaanauati%2Freact-dfp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaanauati%2Freact-dfp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaanauati%2Freact-dfp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaanauati","download_url":"https://codeload.github.com/jaanauati/react-dfp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182353,"owners_count":20897380,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["advertising","dfp","es6","gpt","reactjs"],"created_at":"2024-08-03T00:00:59.225Z","updated_at":"2025-04-04T13:10:48.481Z","avatar_url":"https://github.com/jaanauati.png","language":"JavaScript","funding_links":[],"categories":["GAM Libraries / Tools"],"sub_categories":[],"readme":"# React DFP \u0026middot; [![Build Status](https://travis-ci.org/jaanauati/react-dfp.svg?branch=master)](https://travis-ci.org/jaanauati/react-dfp) [![](https://img.shields.io/npm/dm/react-dfp.svg?label=DL)](https://github.com/jaanauati/react-dfp) [![Minizipped size](https://img.shields.io/bundlephobia/minzip/react-dfp.svg)](https://github.com/jaanauati/react-dfp) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jaanauati/react-dfp/blob/master/LICENSE) [![](https://img.shields.io/npm/dependency-version/react-dfp/peer/react.svg)](https://github.com/jaanauati/react-dfp/blob/master/LICENSE)\n\nA React implementation of the google [DFP](https://developers.google.com/doubleclick-gpt/reference \"GPT Reference\") API. This package is inspired in the awesome library [jquery.dfp](https://github.com/coop182/jquery.dfp.js), and aims to provide its same ease of usage but, of course, taking into consideration the react concepts \u0026 lifecycle features.\n\n## Installation:\n\nTo install just run the following command (no other dependencies are required):\n\n```bash\nnpm install --save react-dfp\n```\n\nor\n\n```bash\nyarn add react-dfp\n```\n\nYou can find more details in the [React-dfp site](https://react-dfp.surge.sh/).\n\n## Getting started\n\nReact-dfp has been designed in a very React-ish way, its main goal is to be able to serve DFP ads in your React application just using React components, which means that you won't have to programmatically perform any initialization call when your page loads.\n\nHere a quick example, notice that ads will render in your page as soon as your component is mounted, through its components (DFPSlotsProvider and AdSlot), react-dfp is making a full abstraction of the google dfp/gpt API.\n\n```javascript\nimport React, { Component } from 'react';\nimport { DFPSlotsProvider, AdSlot } from 'react-dfp';\n...\nclass Page extends Component {\n   render() {\n     ...\n\n     return (\n        \u003cDFPSlotsProvider\u003e\n         ...\n         \u003cAdSlot adUnit=\"home/leaderboard\" sizes={[ [900, 90], [728, 90]]} /\u003e\n         ...\n         /* you can override the props */\n         \u003cAdSlot adUnit=\"home/mobile\" sizes={[ [300, 250], [300, 600]]} /\u003e\n         ...\n         \u003cdiv\u003e\n           ...\n           \u003cAdSlot adUnit=\"home/footer\" sizes={[ [300, 250], [300, 600]]} /\u003e\n           ...\n         \u003c/div\u003e\n         ...\n       \u003c/DFPSlotsProvider\u003e\n     );\n   }\n}\n```\n\n## Examples\n\nSee the [React-dfp site](https://react-dfp.surge.sh) for more examples (basic example, how to have refreshable ads, etc).\n\n## Documentation\n\nYou can find the React-dfp documentation [on the website](https://react-dfp.surge.sh). The site is divided into many sections that describe each one the Components, properties and also the DFPManager API (in case you need to use this one manually).\n\nThe website is also full of live/working examples.\n\nYou can find the source code of the website here: https://github.com/jaanauati/react-dfp-website.\n\n## Wanna help?\n\nI certainly know that test cases need to be improved, but, as long as your syntax is clean, submit test cases and, of course, all the interfaces are kept working, all kind of contribution is welcome.\n\n## Complaints.\n\nPull requests are welcome 🍻.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaanauati%2Freact-dfp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaanauati%2Freact-dfp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaanauati%2Freact-dfp/lists"}