react-tads-widget

React TADS Widget

A React component for displaying ads using TADS

React Compatibility

This package is compatible with React versions:

• React 16.8+ (with hooks)
• React 17.x
• React 18.x
• React 19.x

Features

• ✅ Full React 16.8+ compatibility
• ✅ Classic JSX Transform support
• ✅ Concurrent rendering safe (React 18+)
• ✅ Strict Mode compatible
• ✅ Backward compatible with older React versions

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 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 manager of tAds
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 requests 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

Docs and Examples

• TADS registration
• TADS official publishers documentation
• Telegram Mini App example with integrated TADS widget