@adsgram/react 1.0.0 → 1.0.2

package/README.md

@@ -15,11 +15,11 @@ pnpm add @adsgram/react
 ## Components
 
 ### `<AdsgramTask />`
+React wrapper component for the `<adsgram-task>` custom element. Using for the [Task](https://docs.adsgram.ai/publisher/task-examples) ad format.
 
-React component for the `<adsgram-task>` custom element.
+<img src="https://docs.adsgram.ai/assets/native_task.Dp3rdtR0.png" alt="Task ad" width="300">
 
 #### Props
-
 | Prop               | Type           | Description                             |
 |--------------------|----------------|-----------------------------------------|
 | `blockId`          | `string`       | Unique task block ID (required)         |
@@ -30,26 +30,30 @@ React component for the `<adsgram-task>` custom element.
 | `onBannerNotFound` | `EventHandler` | No banner available callback (optional) |
 | `onTooLongSession` | `EventHandler` | Long session callback (optional)        |
 
-#### Example
+#### Customization
+More info about customization and slots usage see [here](https://docs.adsgram.ai/publisher/task-integration-example#_4-customise-task-so-it-fits-your-application-design)
 
+#### Example
 ```tsx
+import { JSX } from "react";
 import { AdsgramTask } from '@adsgram/react';
 
-const handleReward = () => {
-  // your code to reward user
-};
 
-const handleError = () => {
-  // do nothing or handle error
-};
+export function Task(): JSX.Element | null {
+  const handleReward = (event: CustomEvent<string>): void => {
+    console.log("User earned reward:", event.detail);
+  };
+  
+  const handleError = (event: CustomEvent<string>): void => {
+    console.error("Task error:", event.detail);
+  };
 
-function MyTask() {
   return (
     <AdsgramTask blockId="task-123" className={styles.task} onReward={handleReward} onError={handleError}>
       <span slot="reward" className={styles.task__reward}>1000 coins</span>
       <div slot="button" className={styles.task__button}>go</div>
-      <div slot="claim" className={stylestask__button_claim}>claim</div>
-      <div slot="done" className={stylestask__button_done}>done</div>
+      <div slot="claim" className={styles.task__button_claim}>claim</div>
+      <div slot="done" className={styles.task__button_done}>done</div>
     </AdsgramTask>
   );
 }
@@ -58,9 +62,11 @@ function MyTask() {
 ### Hook
 
 ### `useAdsgram`
+React hook for managing fullscreen ads. Using for the [Reward](https://docs.adsgram.ai/publisher/reward-examples) and [Interstitial](https://docs.adsgram.ai/publisher/interstitial-examples) ad formats.
 
-#### Props
+<img src="https://docs.adsgram.ai/assets/rewarded_video.CdG2Ubqt.png" alt="Fullscreen ad" width="300">
 
+#### Props
 | Prop               | Type                           | Description                                       |
 | ------------------ | ------------------------------ | ------------------------------------------------- |
 | `blockId`          | `string`                       | Unique ad block ID (required)                     |
@@ -77,22 +83,22 @@ An object with methods to control the Adsgram ad:
 - `destroy(): void` — Destroys the ad controller.
 
 #### Example
-
 ```tsx
+import { JSX } from "react";
 import { useAdsgram } from '@adsgram/react';
 
-function MyAdButton() {
-  const handleReward = () => {
+export function AdButton(): JSX.Element {
+  const handleReward = (): void => {
     // user watch ad till the end
     // your code to reward user for rewarded format
   }
 
-  const handleError = () => {
+  const handleError = (): void => {
     // user get error during playing ad
     // do nothing or whatever you want
   },
 
-  const { show } = useAdsgram({ blockId: 'task-123', onReward: handleReward, onError: handleError });
+  const { show } = useAdsgram({ blockId: '123', onReward: handleReward, onError: handleError });
 
   return <button onClick={show}>Show Ad</button>;
 }

package/dist/components/adsgramTask.d.ts

@@ -1,17 +1,5 @@
 import { BlockId, EventHandler } from "@adsgram/common";
 import React, { JSX } from "react";
-/**
- * Props for the AdsgramTask component
- * @interface TaskProps
- * @property {BlockId} blockId - The unique identifier for the task block
- * @property {boolean} [debug] - Whether to enable debug mode
- * @property {string} [className] - Additional CSS class names
- * @property {React.ReactNode} [children] - Child elements to render inside the task component
- * @property {EventHandler} [onReward] - Callback for reward events
- * @property {EventHandler} [onBannerNotFound] - Callback for banner not found events
- * @property {EventHandler} [onTooLongSession] - Callback for too long session events
- * @property {EventHandler} [onError] - Callback for error events
- */
 export interface TaskProps {
     blockId: BlockId;
     debug?: boolean;
@@ -27,8 +15,16 @@ export interface TaskProps {
  * Handles initialization and event binding for the Adsgram task functionality.
  *
  * @component
- * @param {TaskProps} props - Component properties
+ * @property {TaskProps} props - Component properties
  * @returns {JSX.Element | null} The rendered task element or null if not ready
+ * @property {BlockId} props.blockId - The unique identifier for the task block
+ * @property {boolean} props.debug - Enable debug mode to get test task from server
+ * @property {string} props.className - Additional CSS class names
+ * @property {React.ReactNode} props.children - Child elements to render inside the task component
+ * @property {EventHandler} props.onReward - Callback for reward events
+ * @property {EventHandler} props.onBannerNotFound - Callback for banner not found events
+ * @property {EventHandler} props.onTooLongSession - Callback for too long session events
+ * @property {EventHandler} props.onError - Callback for error events
  *
  * @example
  * ```tsx

package/dist/components/adsgramTask.js

@@ -6,8 +6,16 @@ import { useEffect, useRef, useState } from "react";
  * Handles initialization and event binding for the Adsgram task functionality.
  *
  * @component
- * @param {TaskProps} props - Component properties
+ * @property {TaskProps} props - Component properties
  * @returns {JSX.Element | null} The rendered task element or null if not ready
+ * @property {BlockId} props.blockId - The unique identifier for the task block
+ * @property {boolean} props.debug - Enable debug mode to get test task from server
+ * @property {string} props.className - Additional CSS class names
+ * @property {React.ReactNode} props.children - Child elements to render inside the task component
+ * @property {EventHandler} props.onReward - Callback for reward events
+ * @property {EventHandler} props.onBannerNotFound - Callback for banner not found events
+ * @property {EventHandler} props.onTooLongSession - Callback for too long session events
+ * @property {EventHandler} props.onError - Callback for error events
  *
  * @example
  * ```tsx

package/dist/hooks/useAdsgram.d.ts

@@ -13,7 +13,7 @@ import type { AdsgramMethods, AdsgramProps } from "@adsgram/common";
  * @param {AdsgramProps} props - Configuration parameters for Adsgram initialization
  * @returns {AdsgramMethods} Methods to interact with the Adsgram sdk
  * @param {string} params.blockId - Unique identifier for the ad block
- * @param {boolean} [params.debug=false] - Enable debug mode
+ * @param {boolean} [params.debug=false] - Enable [debug](https://docs.adsgram.ai/publisher/api-reference#parameters) mode
  * @param {BannerType} [params.debugBannerType] - Forced banner type in debug mode
  * @param {HandlerType} [params.onReward] - Callback when user completes a rewarded ad
  * @param {HandlerType} [params.onError] - Callback when ad playback fails

package/dist/hooks/useAdsgram.js

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef } from "react";
  * @param {AdsgramProps} props - Configuration parameters for Adsgram initialization
  * @returns {AdsgramMethods} Methods to interact with the Adsgram sdk
  * @param {string} params.blockId - Unique identifier for the ad block
- * @param {boolean} [params.debug=false] - Enable debug mode
+ * @param {boolean} [params.debug=false] - Enable [debug](https://docs.adsgram.ai/publisher/api-reference#parameters) mode
  * @param {BannerType} [params.debugBannerType] - Forced banner type in debug mode
  * @param {HandlerType} [params.onReward] - Callback when user completes a rewarded ad
  * @param {HandlerType} [params.onError] - Callback when ad playback fails

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@adsgram/react",
-  "version": "1.0.0",
+  "version": "1.0.2",
+  "homepage": "https://docs.adsgram.ai/publisher/",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,7 +13,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@adsgram/common": "1.0.0"
+    "@adsgram/common": "1.0.2"
   },
   "devDependencies": {
     "@types/node": "^24.0.1",