# React

## 1. Insert widget code in the app

Install the [react-tads-widget](https://www.npmjs.com/package/react-tads-widget) package and initialize the widget:

{% stepper %}
{% step %}

#### Installation

```
npm install react-tads-widget
```

{% endstep %}

{% step %}

#### Add widget init code in your index.js

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

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

{% endstep %}

{% step %}

#### Add widget ad show code in your React component using the following code example for the selected format:

### Text-Graphic Block (TGB)

```jsx
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;
```

### Fullscreen banner

```jsx
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;
```

{% endstep %}
{% endstepper %}

## 2. Add your widget ID&#x20;

Replace YOUR\_WIDGET\_ID with the corresponding widget ID you received from your personal account.

## 3. Set a reward (if needed)

If you want to incentivize users to view or click on the ads, add code to the `onShowRewardCallback` and `onClickRewardCallback` and `onAdsNotFound` functions to reward the user for viewing and/or clicking, respectively.\
You can config your widget using the following parameters

<table><thead><tr><th width="160">Parameter</th><th width="97"></th><th width="104">Type</th><th width="102">Default</th><th>Description</th></tr></thead><tbody><tr><td>id</td><td>required</td><td>string</td><td></td><td>Your widget ID that you received from your personal account</td></tr><tr><td>type</td><td>required</td><td>string</td><td>static</td><td>Type of your widget. It can be 'static' or 'fullscreen'</td></tr><tr><td>debug</td><td>optional</td><td>boolean</td><td>false</td><td>Flag which you can use for development mode (it doesn't collect data in your ads account and doesn't requests real ads)</td></tr><tr><td>onShowReward</td><td>optional</td><td>function</td><td>null</td><td>Callback which will be called after user watches ad</td></tr><tr><td>onClickReward</td><td>optional</td><td>function</td><td>null</td><td>Callback which will be called after user clicks ad</td></tr><tr><td>onAdsNotFound</td><td>optional</td><td>function</td><td>null</td><td>Callback which will be called if we don't find ads for user</td></tr></tbody></table>