{"id":23532643,"url":"https://github.com/outbrain-inc/react-outbrain-widget","last_synced_at":"2026-01-12T02:31:47.841Z","repository":{"id":42206840,"uuid":"186838606","full_name":"outbrain-inc/react-outbrain-widget","owner":"outbrain-inc","description":"A component to embed a outbrain widget inside a react app ","archived":false,"fork":false,"pushed_at":"2024-11-13T14:06:14.000Z","size":1357,"stargazers_count":8,"open_issues_count":9,"forks_count":15,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-12T16:19:11.546Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/outbrain-inc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-05-15T14:02:34.000Z","updated_at":"2025-01-23T20:05:42.000Z","dependencies_parsed_at":"2024-09-08T09:50:59.819Z","dependency_job_id":"13b6380f-ec45-4dc5-b318-ee9add4327a8","html_url":"https://github.com/outbrain-inc/react-outbrain-widget","commit_stats":null,"previous_names":["outbrain-inc/react-outbrain-widget"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outbrain-inc%2Freact-outbrain-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outbrain-inc%2Freact-outbrain-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outbrain-inc%2Freact-outbrain-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/outbrain-inc%2Freact-outbrain-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/outbrain-inc","download_url":"https://codeload.github.com/outbrain-inc/react-outbrain-widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250337276,"owners_count":21414092,"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":[],"created_at":"2024-12-25T23:12:10.361Z","updated_at":"2026-01-12T02:31:47.835Z","avatar_url":"https://github.com/outbrain-inc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-outbrain-widget\n\n![](https://github.com/outbrain/react-outbrain-widget/blob/master/ob-react.svg)\n\nEmbed your outbrain widget inside a react app\n\n[![npm version](https://badge.fury.io/js/react-outbrain-widget.svg)](https://badge.fury.io/js/react-outbrain-widget)\n\n## Demo\n\n[**Live Demo**](https://codesandbox.io/s/outbrain-react-widget-example-yet94)\n\n## Installation\n\n**Note:** _react-outbrain-widget assumes outbrain.js was loaded before react's first rendering. Please make sure outbrain.js is loaded via a script tag on the app's index.html_\n\n```html\n\u003chead\u003e\n\t\u003cscript async src=\"https://widgets.outbrain.com/outbrain.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nWith NPM\n```sh\nnpm install react-outbrain-widget --save\n```\n\n## Usage\n### Include the Component\n\n```jsx\nimport React from 'react';\nimport { OutbrainWidget } from 'react-outbrain-widget';\n\nclass Component extends React.Component {\n  render() {\n    return (\n      \u003cOutbrainWidget dataSrc=\"mySite.com\" dataWidgetId=\"AR_1\" /\u003e\n    );\n  }\n}\n```\n\n### Placement props (Only use advised one)\nEither of the following props is **required** to use the component. Use the correct props and value which were advised by your Sales Engineer to represent where the widget is served.\n\nProps Name | Type | Integration type | Description | Example\n-|-|-|-|-\n`dataSrc` | String | Direct Web | The crawlable URL of the current page | \"http://www.webx0.com/2010/07/some-posthype-thoughts-about-flipboard.html\"\n`obContentUrl` | String | Web Mediation | The crawlable URL of the placement | \"http://www.webx0.com/2010/07/some-posthype-thoughts-about-flipboard.html\"\n`obBundleUrl` | String | App | The store URL of the App | \"https://play.google.com/store/apps/details?id=com.outbrain.app\"\n`obPortalUrl` | String | Native Environment | A URL representing the context where the ad placement is presented to users. Does not need to be a reachable/crawlable URL. | \"http://www.chatPortal.com\"\n\n### Other props\nprops Name | Type | Requirement | Description | Example\n-|-|-|-|-\n`dataWidgetId` | String | **Required** | The widget ID as provided by Outbrain. | \"JS_1\"\n`obInstallationKey` | String | **Required for Web Mediation, App and Native Environment** | Installation/partner key as provided by Outbrain. | \"ABC1234567890\"\n`obUserId` | String | **Required for App \u0026 Native Environment** | It is mandatory to pass the Google or Apple Advertising ID for Outbrain installations in mobile apps, according to [Google](https://support.google.com/googleplay/android-developer/answer/6048248) and [Apple](https://developer.apple.com/library/prerelease/ios/documentation/AdSupport/Reference/ASIdentifierManager_Ref/index.html) guidelines and developer agreements. See [this page](http://developer.outbrain.com/google-and-apple-advertising-id/) for Outbrain requirements. | \"EA7583CD-A667-48BC-B806-42ECB2B48606\"\n`obLanguage` | String | **Required for App \u0026 Native Environment** | The 2-letter language code (ISO-639-1-alpha-2). Must be added if bundleUrl or portalUrl is sent. | \"en\"\n`data-ob-app-id`| String |**Required for pre-installed App Environment**| The App's unique identifier iOS: Bundle ID, Android: [Application ID/Package Name](https://developer.android.com/studio/build/application-id) |\"com.outbrain.app\"\n`data-app-ver`| String | Optional | A version number of the App | \"1.0.0\"\n`obPsub` | String | *Only if instructed by SE, App \u0026 Native only* | String value for additional section-level reporting breakdowns. Allowed characters: alphanumeric and underscore '_'. Requires permission from your Sales Engineer or Partner Manager. | \"minus1\"\n`externalId` | String | Optional | String value with maximum of 70 characters for use with the [Engage Variant Reporting API](https://engagereportsapiexternalid.docs.apiary.io/#reference/reports/external-id-report). A maximum of 10K IDs/hour are supported. Contact your Partner Manager for API access. | \"id123\"\n`obDarkMode` | String | Optional | A string value to set dark mode on or off, the options are \"true\" or \"false\"| \"true\"\n\n\n## Rendering optimisation\n### Modifications not recommended\nThe component itself handles rendering of widgets when required props are given properly. When it doesn't work as expected on your site, please do not try modifying the code of component itself, but contact your Sales Engineer or Partner manager with sample pages.\n\n### The component must not be hidden or cached.\nIf the page history is cached in the DOM tree, please remove the component itself from the cache. Only the component placed in the visible contents should be rendered.\nToggle example:\n```jsx\nrender() {\n  return (\n      {showOutbrainWidget ? \u003cOutbrainWidget dataSrc=\"mySite.com\" dataWidgetId=\"AR_1\" /\u003e : null}\n  );\n}\n```\n\n### Server Side Rendering\nThe component should work with SSR.\nIf it's used in the combination of SSR and CSR, it should either reuse the components (rehydration) or clear them (clear the Placement prop) and make sure to remove the component on hidden contents as mentioned in the previous section.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foutbrain-inc%2Freact-outbrain-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foutbrain-inc%2Freact-outbrain-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foutbrain-inc%2Freact-outbrain-widget/lists"}