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>