Getting started

Installation

To start using the Spot React library, install it via npm:

npm install spot-ads-react

or with yarn:

yarn add spot-ads-react

Basic Usage

Step 1: Set up the Provider

To enable ads across your application, wrap your root component with the SpotAdsProvider component and provide your apiKey.

Example

./src/App.jsx

import { SpotAdsProvider } from "spot-ads-react";
import MyComponent from “./MyComponent”

const App = () => {
  return (
    <SpotAdsProvider apiKey="YOUR_API_KEY">
      <MyComponent />
    </SpotAdsProvider>
  );
}

export default App;

Step 2: Displaying an Ad

In any component where you want to display an ad, you can use the useSpotAd hook.

1. Import the useSpotAd hook:

2. Set up the ad display logic.

Example

./src/MyComponent.jsx

import { useSpotAd } from "spot-ads-react";

const MyComponent = () => {
  const spotAd = useSpotAd();

  // Define callback functions
  const onSuccess = () => {
    console.log("Ad is showed!");
    // Add reward logic here
  };

  const onError = (error) => {
    console.error("Ad failed to show:", error);
  };

  // Function to show the ad
  function showSpotAd() {
    spotAd.showAd(onSuccess, onError);
  }

  return (
    <div>
      <button onClick={showSpotAd}>Show Spot Ad</button>
    </div>
  );
}

export default MyComponent;