npm package: @hypelab/sdk-react
Description: Adds HypeLab component wrappers for TypeScript React projects.
Latest version: 1.0.4

# 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](https://docs.hypelab.com) 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.

```tsx
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 |

```tsx
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.

```tsx
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>
```