react-tads-widget

React TADS Widget

A React component for displaying ads using https://tads.me/

1. Installation

npm install react-tads-widget

2. Add widget init code in your index.js

import { TadsWidgetProvider } from 'react-tads-widget';

root.render(
  <React.StrictMode>
    <TadsWidgetProvider>
        <App />
    </TadsWidgetProvider>
  </React.StrictMode>
);

3. Add widget ad show code in your react component (Examples)

3.1. Widget type is TGB (STATIC)

import React from "react";
import { TadsWidget } from 'react-tads-widget';

const PageWithAds: React.FC = () => {
    const rewardUserByClick = () => {
        console.log("User rewarded for click");
    };

    const onAdsNotFound = () => {
        console.log("Not found ads for this user");
    }

    return (
        <div className="container">
            <TadsWidget id="unique-widget-id" type="static" debug={false} onClickReward={rewardUserByClick} onAdsNotFound={onAdsNotFound} />
        </div>
    );
}

export default PageWithAds;

3.2. Widget type is FULLSCREEN

import React from "react";
import { TadsWidget, renderTadsWidget } from 'react-tads-widget';

const PageWithAds: React.FC = () => {
    const rewardUserByShow = () => {
        console.log("User rewarded for impression");
    };

    const onAdsNotFound = () => {
        console.log("Not found ads for this user");
    }

    const showFullScreen = () => {
        renderTadsWidget({ id: 'unique-widget-id', type: 'fullscreen' })
    }

    return (
        <div className="container">
            <button onClick={showFullScreen}>SHOW FULLSCREEN</button>

            <TadsWidget id="unique-widget-id" type="fullscreen" debug={false} onAdsNotFound={onAdsNotFound} onShowReward={rewardUserByShow} />
        </div>
    );
}

export default PageWithAds;

4. Config your widget

Param		Type	Default	Description
id	required	string		Your widget id, which you get from your personal account
type	required	string	static	Type of your widget. It can be 'static', 'fullscreen', etc. See docs to check all available types.
debug	optional	boolean	false	flag which you can use for development mode (it doesn't collect data in your ads account and doesn't request real ads)
onShowReward	optional	function	null	callback which will be called after user watches ad
onClickReward	optional	function	null	callback which will be called after user clicks ad
onAdsNotFound	optional	function	null	callback which will be called if we don't find ads for user

Read more about integration in our docs for publisher https://docs.tads.me/getting-started/publishers