This is a unofficial third-party React client SDK for integrating Sevio into your React applications. The SDK provides components and hooks to easily manage and display advertisements using Sevio's services.

• Installation
• Getting Started
  • Provider Setup
  • Using the useSevio Hook
  • Sevio Context Properties
  • Advertisement Component
• API Reference
  • SevioProvider
  • useSevio
  • SevioAdvertisement
• Example
• License
• Contributing
• Contact

Install the SDK via npm:

npm install git+https://github.com/ChristianTucker/sevio-react-sdk

To use the Sevio SDK, you need to wrap your application with the <SevioProvider> component. This provider must be placed at a top level in your application and requires two properties: accountId and inventoryId, both of which are provided by Sevio.

import React from 'react';
import ReactDOM from 'react-dom';
import { SevioProvider } from 'sevio-react-sdk/context';

const App = () => (
  <SevioProvider accountId="your-account-id" inventoryId="your-inventory-id">
    {/* Your application components */}
  </SevioProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

The useSevio hook can be used to access Sevio context properties within your components. It provides access to various properties and methods to manage advertisements. However, this hook will likely go unused as advertisement state is managed automagically by the <SevioAdvertisement> component. refreshZone is only used in cases where you need direct control over advertisement refreshing, make sure to verify your use case with Sevio first, most people do not need this and it may get your account disabled if you abuse it.

import React from 'react';
import { useSevio } from 'sevio-react-sdk/hooks';

const MyComponent = () => {
  const { initialized, advertisements, setAdvertisements, refreshZone, debugEnabled } = useSevio();
  // ...
  return ( ... );
};

The SevioContextProps interface extends common Sevio properties and includes the following:

• initialized: boolean: Indicates if the SDK is initialized.
• advertisements: SevioPlacement[][]: A 2D array of advertisements.
• setAdvertisements: React.Dispatch<React.SetStateAction<SevioPlacement[][]>>: Function to update advertisements.
• refreshZone: (adType: AdType, zone: string) => void: Function to refresh advertisements in a specific zone.
• debugEnabled?: boolean: Optional debug mode.

The SevioAdvertisement component is used to display advertisements. This component automatically handles the state updates to show and hide advertisements based on its placement in the component tree.

import React from 'react';
import { SevioAdvertisement } from 'sevio-react-sdk/components';

const AdComponent = () => (
  <SevioAdvertisement accountId="your-account-id" inventoryId="your-inventory-id" zone="header" adType="banner">
    {/* Optional children components */}
  </SevioAdvertisement>
);

Props:

• accountId: string: Your Sevio account ID.
• inventoryId: string: Your Sevio inventory ID.
• debugEnabled?: boolean: Optional. Enable debug mode.

Returns SevioContextProps:

• initialized: boolean
• advertisements: SevioPlacement[][]
• setAdvertisements: React.Dispatch<React.SetStateAction<SevioPlacement[][]>>
• refreshZone: (adType: AdType, zone: string) => void
• debugEnabled?: boolean

Props:

• accountId: string: Your Sevio account ID.
• inventoryId: string: Your Sevio inventory ID.
• zone: string: The zone where the advertisement will be displayed.
• adType: AdType: The type of advertisement.
• children?: React.ReactNode: Optional children components.

Here is a complete example of how to use the Sevio SDK in a React application:

import React from 'react';
import ReactDOM from 'react-dom';
import { SevioProvider, SevioAdvertisement } from 'sevio-react-sdk';

const AdSection = () => {
  return (
    <div>
        <SevioAdvertisement
          zone={"<INSERT_ZONE_ID>"}
          adType={AdType.Banner}
        />
    </div>
  );
};

const App = () => (
  <SevioProvider accountId="your-account-id" inventoryId="your-inventory-id">
    <AdSection />
  </SevioProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

This project is licensed under the MIT License. See the LICENSE file for details.

Contributions are welcome! Please open an issue or submit a pull request for any changes or additions.

For any questions or support with this SDK, please create an issue.

For any questions or support with sevio, please contact [email protected].