HypeLab React SDK Wrapper

Adds HypeLab component wrappers for TypeScript React projects.

Note: This package requires the HypeLab SDK be initialized in your project using a script tag in your HTML.

Visit the documentation site for more information.

Usage

First install this package: npm install @hypelab/sdk-react Then, import and use HypeLab components in your project:

Banner

Banner components only require a placment slug.

import { Banner } from "@hypelab/sdk-react";
...
<Banner placement="placement_slug" />

Native

Native placements take a placement slug and are configured with child elements that define the look of the ad.

Child elements inherit your styles and are identified by their data-ref attribute. The following data-ref values are supported:

| Value | Element type | Description | | ------------ | ------------ | ------------------------------------------------------------------------------------------- | | headline | text | The headline of the ad will be set as the textContent of this element | | body | text | The body of the ad will be set as the textContent of this element | | ctaText | text | The CTA text of the ad will be set as the textContent of this element | | displayUrl | text | The display URL of the ad will be set as the textContent of this element | | advertiser | text | The advertiser of the ad will be set as the textContent of this element | | ctaLink | anchor | The CTA link of the ad will be set as the href of this element | | icon | image | The icon of the ad will be set as the src of this element | | mediaContent | any | The media content of the ad. An img or video will be created as a child of this element |

import { Native } from "@hypelab/sdk-react";
...
<Native placement="placement_slug">
  <div className="bg-black p-5" style="width: 729px">
    <div className="relative flex items-center">
      <div className="flex-shrink-0">
        <img data-ref="icon" className="h-10 w-10 rounded-full mr-5" />
      </div>
      <div className="min-w-0 flex-1">
        <span className="absolute inset-0" aria-hidden="true"></span>
        <p className="font-medium text-slate-400">@<span data-ref="advertiser"></span></p>
        <p data-ref="displayUrl" className="text-emerald-300 text-sm"></p>
      </div>
    </div>
    <div data-ref="body" className="mt-3 text-white"></div>
    <div className="body-row text-left">
      <div data-ref="headline" className="mt-3 text-white"></div>

      <div className="mt-5">
        <a data-ref="ctaLink" href="/" target="_blank" rel="noreferrer">
          <div data-ref="mediaContent" className="mediaContent"></div>
          <div data-ref="ctaText" className="rounded-full bg-emerald-300 px-10 py-2 text-black font-bold mt-5 text-center"></div>
        </a>
      </div>
    </div>
  </div>
</Native>

Rewarded

Rewarded components take an onComplete callback which is called when the video is completed and dismissed. Rewarded components also take optional onReady and onError callbacks.

To show the rewarded video, use the show method on the Rewarded component.

import { useRef } from 'react';
import { Rewarded, RewardedElement } from "@hypelab/sdk-react";
...
// Create a ref for the rewarded component
const rewarded = useRef<RewardedElement>(null);
// Event handlers
const onReady = () => console.log('onReady');
const onError = () => console.log('onError');
const onComplete = () => console.log('onComplete');
// Show rewarded video
const showRewarded = () => rewarded.current?.show();
...
// Render the rewarded component and button
<Rewarded placement="placement_slug" ref={rewarded} onReady={onReady} onError={onError} onComplete={onComplete} />
<button type="button" onClick={showRewarded}>Show Rewarded</button>