Adhese 反应 SDK

对于 React 开发者来说,我们提供一个 React SDK 允许您轻松地将我们的服务整合到您的 React 应用程序中.

反应 SDK 建在顶部 Adhese Java 脚本 SDK 财务报告和审定财务报表 不需要单独安装 Adhese JavaScript SDK .

安装

npm install @adhese/sdk-react

AdheseProvider

这个 AdheseProvider 组成部分是一个背景提供者,使Adhese实例能够提供给所有儿童组成部分. 应该放在你申请的根头 它接受一个 options 传递给 createAdhese 函数。 当 options 道具更改, Adhese 实例重现 。 此提供者取代 createAdhese 函数.

这个 AdheseProvider 组件是环绕 createAdhese 函数。 它必须使用 AdheseProvider 如果你想使用 useAdhese 或者说 useAdheseSlot 钩子.

import { AdheseProvider } from '@adhese/sdk-react';

function Devtools() {
  return (
    <AdheseProvider options={{
      account: 'your-account-id',
    }}>
      <YourApp />
    </AdheseProvider>
  );
}

useAdhese

这个 useAdhese 钩子返回由 AdheseProvider它可用于访问 任何儿童部分的阿德斯实例.

import { useAdhese } from '@adhese/sdk-react';

function YourComponent() {
  const adhese = useAdhese();
  // Use the adhese instance
}

useAdheseSlot

这个 useAdheseSlot 钩子返回给定槽名的槽对象。 使用该选项在组件中创建槽 .

它接受以下论点:

• elementRef: 对应槽应附加的元素.
• options: 带有槽选项的对象。 此对象传递到 adhese.addSlot 函数.

当组件被卸载时,该槽会自动从 Adhese 实例中删除 .

import { useAdheseSlot } from '@adhese/sdk-react';

function YourComponent() {
  const elementRef = useRef(null);

  const slot = useAdheseSlot(elementRef, {
    format: 'your-format',
  });

  return (
    <div ref={elementRef} />
  );
}

useAdheseSlot 与 onBeforeRender

类似在 时段文档,您可以使用 页:1 onBeforeRender 召回截取即将发布的广告。 那里的例子用香草JavaScript来写. 改为: 使用情况jsx 您可以使用反应 renderToStaticMarkup 函数可以创建静态 HTML,同时仍然具有 联合来文十.

import { renderToStaticMarkup } from 'react-dom/server';
import { useAdheseSlot } from '@adhese/sdk-react';

function YourComponent() {
  const adhese = useAdhese();
  const elementRef = useRef(null);

  const slot = useAdheseSlot(elementRef, {
    format: 'your-format',
    onBeforeRender: (ad) => {
      if (typeof ad.tag !== 'object') {
        // If the tag is not an object, return the ad as is
        return ad;
      }

      return {
        ...ad,
        tag: renderToStaticMarkup((
          <div>
            <h1>{ad.tag.title}</h1>
            <p>{ad.tag.description}</p>
          </div>
        )),
      }
    },
  });

  return (
    <div ref={slot.elementRef} />
  );
}