migration_react.md

HypeLab SDK Migration Guide - React

Installation

• Remove the hypelab-react package from your package.json, and instead install @hypelab/sdk-react.
• Remove any instances of the HypeLab client and HypeLabContext components from your application.
• Include the HypeLab SDK script tag as shown in our docs for your React framework.

Formats

Banner

• Rename the import from hypelab-react to @hypelab/sdk-react.

Example:

-import { Banner } from 'hypelab-react';
+import { Banner } from '@hypelab/sdk-react';

 export default function BannerPage() {
   return (
     <Banner placement="banner_placement" />
   );
 }

No other changes are needed.

Native

• Rename the import from hypelab-react to @hypelab/sdk-react.
• Remove the render function wrapper inside your Native component.
• Replace any references to {ad.<prop>} with a data-ref='<prop>' prop.
• Replace the NativeLink component with a <a data-ref='ctaLink'> element.
• Replace the NativeMediaContent component with a <div data-ref='mediaContent'> element.

Example:

-import { Native, NativeLink, NativeMediaContent } from 'hypelab-react';
+import { Native } from '@hypelab/sdk-react';

 export function NativeComponent(props: { placement: string }) {
   return (
     <Native placement={props.placement}>
-      {(ad) => (
-        <div className="p-5">
-          <div className="relative flex items-center">
-            <div className="flex-shrink-0">
-              <img className="mr-5 h-10 w-10 rounded-full" src={ad.icon} />
-            </div>
-            <div className="min-w-0 flex-1">
-              <span className="absolute inset-0" aria-hidden="true" />
-              <p className="font-medium text-slate-400">
-                @<span>{ad.advertiser}</span>
-              </p>
-              <p className="text-sm text-emerald-300">
-                {ad.displayUrl}
-              </p>
-            </div>
+      <div className="p-5">
+        <div className="relative flex items-center">
+          <div className="flex-shrink-0">
+            <img data-ref="icon" className="mr-5 h-10 w-10 rounded-full" alt="" />
           </div>
-          <div className="body-row text-left">
-            <div className="mt-3 text-white">
-              {ad.headline}
-            </div>
+          <div className="min-w-0 flex-1">
+            <span className="absolute inset-0" aria-hidden="true" />
+            <p className="font-medium text-slate-400">
+              @<span data-ref="advertiser"></span>
+            </p>
+            <p data-ref="displayUrl" className="text-sm text-emerald-300"></p>
+          </div>
+        </div>
+        <div className="body-row text-left">
+          <div data-ref="headline" className="mt-3 text-white"></div>

-            <div className="mt-3 text-white">
-              {ad.body}
-            </div>
+          <div data-ref="body" className="mt-3 text-white"></div>

-            <div className="mt-5">
-              <div>
-                <NativeLink>
-                  <div>
-                    <NativeMediaContent />
-                  </div>
-                  <div className="mt-5 rounded-full bg-emerald-300 px-10 py-2 text-center font-bold text-black">
-                    {ad.ctaText}
-                  </div>
-                </NativeLink>
-              </div>
-            </div>
+          <div className="mt-5">
+            <a data-ref="ctaLink" href="#!" target="_blank">
+              <div data-ref="mediaContent" className="h-fit w-fit"></div>
+              <div
+                data-ref="ctaText"
+                className="mt-5 rounded-full bg-emerald-300 px-10 py-2 text-center font-bold text-black"
+              ></div>
+            </a>
           </div>
         </div>
-      )}
+      </div>
     </Native>
   );
 }

Rewarded

• Rename the import from hypelab-react to @hypelab/sdk-react, and import Rewarded and RewardedElement.
• Import useRef in adddition to useState from react.
• Remove the show state, and instead add a state to track the status of the rewarded ad:
  • const [status, setStatus] = useState<'pending' | 'ready' | 'error'>('pending');
• Add a useRef to hold a ref to the Rewarded component:
  • const ref = useRef<RewardedElement>(null);.
• Create onReady and onError handlers in addition to your existing handleRewarded function.
• To show the ad, call ref.current?.show() instead of setShow(true).
• Add the ref, onReady and onError props to your Rewarded component, and remove the show prop.

Example:

-import { Rewarded } from 'hypelab-react';
-import { useState } from 'react';
+import { Rewarded, RewardedElement } from '@hypelab/sdk-react';
+import { useRef, useState } from 'react';

 export default function RewardedPage() {
-  const [show, setShow] = useState(false);
+  const ref = useRef<RewardedElement>(null);
+  const [state, setState] = useState<'pending' | 'ready' | 'error'>('pending');

+  const onReady = () => {
+    setState('ready');
+  };
+
+  const onError = () => {
+    setState('error');
+  };
+
   const handleRewarded = () => {
     console.log('REWARD GIVEN');
-    setShow(false);
+    setState('pending');
   };

   return (
     <div className="grid h-screen place-items-center">
       <button
         className="rounded-md border border-gray-300 bg-indigo-600 px-4 py-2 text-white text-lg"
+        disabled={state !== 'ready'}
         onClick={() => {
-          setShow(true);
+          ref.current?.show();
         }}
       >
         Show Rewarded Video
       </button>
-      <Rewarded placement="rewarded_placement" show={show} onComplete={handleRewarded} />
+      <Rewarded ref={ref} placement="rewarded_placement" onReady={onReady} onError={onError} onComplete={handleRewarded} />
     </div>
   );
 }