# @buddy-technology/offer-component 中文文档

规范地址：https://npmcn.com/package/%40buddy-technology/offer-component/

版本：1\.7\.1
npm 元数据更新时间：2026-09-23T16:10:05.293Z
中文译文更新时间：2026-11-08T22:50:40.852Z
软件包许可：UNLICENSED

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40buddy-technology/offer-component
原文对照：https://npmcn.com/package/%40buddy-technology/offer-component/?lang=original
项目主页：https://github.com/Buddy-Technology/ion-to-react#readme
源码仓库：https://github.com/Buddy-Technology/ion-to-react

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：104 kB，26 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2022-09-09T00:49:45.119Z
- 最新版本发布：2026-03-25T16:37:36.421Z
- 近 30 天下载量：2016（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 3 个）

## 中文简介

\--- 添加的响应组件 [哥们](https://buddy.insure/) 保险网关

## 安装

```sh
npm install @buddy-technology/offer-component
```

也可以使用：`pnpm add @buddy-technology/offer-component`、`yarn add @buddy-technology/offer-component`、`bun add @buddy-technology/offer-component`

## README

# Buddy 提供组件

* * *

添加的反射组件 [哥们](https://buddy.insure/) 保险网关

## 目录

-   [所需资源](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-requirements)
-   [安装](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-installation)
-   [基本用途](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-basic-usage)
-   [道具](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-props)
-   [配置文件](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-configuration-files)
    -   [第2版配置文件(建议)](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-version-2-configuration-files-recommended)
    -   [版本 1 配置文件](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-version-1-configuration-files)
-   [查看类型](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-view-types)
-   [离职](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-checkout)
    -   [只供客户端应用](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-for-client-side-only-apps)
    -   [用于完整堆栈的应用程序](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-for-full-stack-apps)
-   [预填数据](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-pre-filling-data)
-   [样式](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-styling)
    -   [颜色调色板](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-color-palettes)
    -   [覆盖](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-overrides)
    -   [类别和组成部分](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-classes-and-components)
-   [抓取数据](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-capturing-data)

## 所需资源

-   反应 16.8.0+
-   联系人 [哥们](mailto:partners@buddy.insure) 获取 `partnerID` 兼容 `ions` 对于你的具体用途.

* * *

## 安装

从 npm 安装并将其纳入您的 React 构建进程

`npm install @buddy-technology/offer-component` 或者说 `yarn add @buddy-technology/offer-component`

* * *

## 基本用途

```javascript
import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement ion="MY_ION" partnerID="my-partner-id" stage="STAGING" />
    </div>
  );
}
export default App;
```

* * *

## 道具

| 选项名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| \*伙伴关系 | 字符串 |  | Buddy给你的搭档ID |
| \*离子数 | 字符串 |  | 所展示产品的离子ID |
| 阶段 | 语句 | "开始" | 其中一个: `"STAGING"`, (中文(简体) ), `"PRODUCTION"`设置为 `"STAGING"` (默认)用于测试和开发. |
| 配置Sc | 字符串 |  | 将配置文件与要约元素对齐的 URL . |
| 视图类型 | 语句 | `"paginated"` | 设置要约元素的显示方式。 其中一个: `"paginated"`, (中文(简体) ), `"single-form"`, (中文(简体) ), `"offer-only"`。 。 。 . _见 [查看类型](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-view-types) 详细情况._ |
| 数据 | 对象 |  | 客户或政策数据 预装报价。 参见数据结构的具体ION文档. |
| 主题 | 对象 |  | 这个 [主题](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-styling) 以样式和颜色调色板传递对象 |
| 用户事件 | 函数 |  | 用于跟踪用户行为数据的回调. 见 [抓取数据](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-capturing-data) 详细情况. |
| 包括检查 | 布尔 | `true` | 切换是否实现安全退出 . |
| 输入 | 函数 |  | 当用户选择选择要约时,调用会开火. 关于如何完成交易的细节,请参见Buddy的合伙人API Docs. |
| 关闭 | 函数 |  | 当用户选择退出报价时,调用被解除. |

_\*必须_

## 配置文件

### 第2版配置文件(建议)

2 版本配置文件( 使用 `Buddy.embedOptions`),简单地将文件的 URL 传递到 `configSrc` 道具 (英语). 配置文件中定义的属性将与此执行中定义的任何道具合并.

**实例**

```javascript
// config.js 

const configTheme = {
  baseTheme: 'base',
  palette: 'base',
  overrides: {
    styles: {
      h1: { color: 'blue' }
      h2: { color: 'blue' }
    }
  },
};

window.Buddy.embedOptions.theme = configTheme // attach our theme to embedOptions.

```

```javascript
// React implementation

import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  const overrideConfigTheme = {
    overrides: {
      styles: {
        h2: { color: 'red' }
      }
    }
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        stage="staging"
        configSrc="https://js.buddy.insure/config.js" // URL of our config file
        theme={overrideConfigTheme} // deep merges our theme, h2's will now be red, but h1's are still blue.
      />
    </div>
  );
}
export default App;
```

### 版本 1 配置文件

注: 此特性是有用的配对配置文件, 使用 `config` 变量图案。 关于如何实施新配置的信息见: [版本 2 配置文件](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-version-2-configuration-files-recommended)。 。 。 .

用于配置文件 `config` 可变模式,我们需要先使用 `useConfig` 钩住,然后把我们的选择 执行.

```javascript
import React from 'react';
import BuddyOfferElement, { useConfig } from '@buddy-technology/offer-component';

function App() {
  const { config, isLoading } = useConfig('https://config-domain.com/config.js');

  if (isLoading || !config) {
    return null;
  }

  // grab relevant properties from config
  const theme = config.themeBase;
  const data = config.data;
  const handleUserEvents = config.userEvents;

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        stage="staging"
        theme={theme}
        data={data}
        onUserEvent={handleUserEvents}
      />
    </div>
  );
}
export default App;
```

* * *

## 查看类型

Buddy的"提供元素"分为三种不同的取景类型:

-   **标注** (default) - 由用户点击到下一节的相接表.
-   **单表** - 单一形式,所有字段都显示在同一可滚动视图中.
-   **仅提供** - 展示保险报价的图片 上面有放火的引文和复选框 `onOptIn` 检查时 `onOptOut` 当不选中时( 见 [用于完整堆栈的应用程序](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-for-full-stack-apps) 以获得更多信息. **页:1**: " 仅提供 " 的实施工作意在在具有必要数据的控制环境中进行,并且需要付款整合才能离职(见Buddy's [伙伴 API 文件](https://buddyinsurance.stoplight.io/docs/partner-api-documentation/ZG9jOjE1NDc1MzQx)) (中文(简体) ). 如果缺少或无效任何字段,则将随包括所需字段的个人意见而形成一个分步形式。 对满意字段的视图将被跳过 。 一旦用户纠正了任何需要的信息,他们将只降落在屏幕上.

* * *

## 离职

### 只供客户端应用

嵌入部件的默认模式包括全取出. 客户可以通过整个流程进入安全采购,政策将直接送到其收件箱.

要明确设置包含取出内容的部件,请设置 `includeCheckout` 属性改为 `true`。 。 。 .

### 用于完整堆栈的应用程序

在客户已经购买了其他产品的服务器侧和全存储应用程序中,最好将部件中的安全检查排除在外,这样客户就可以与任何其他产品一起购买保险,作为单一交易的一部分。 后端集成( 见 Buddy's [伙伴 API 文件](https://buddyinsurance.stoplight.io/docs/partner-api-documentation/ZG9jOjE1NDc1MzQx))是完成交易所必需的.

要使用此模式, 设置 `includeCheckout` 改为 `false`,或设置视图 `offer-only`。 。 。 .

当用户选择加入时 `onOptIn` 与已完成的应用程序对象一起发射回调。 如果用户选择退出, `onOptOut` 将召入.

```javascript
// simple paginated example to collect data
import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';
import { handleAddToCart, handleRemoveFromCart } from './myApi';

function App() {
  const handleAddToCart = (payload) => {
    handleAddToCart(payload)
  };

  const handleRemoveFromCart = (payload) => {
    handleRemoveFromCart(payload)
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        viewType="paginated"
        includeCheckout={false}
        onOptIn={handleAddToCart}
        onOptOut={handleRemoveFromCart}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;
```

```javascript
// example using offer-only and passing in customer/policy data
import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';
import { handleAddToCart, handleRemoveFromCart } from './myApi';

// passing down data as prop in this example
function App({ userAndPolicyData }) {
  const handleAddToCart = (payload) => {
    handleAddToCart(payload)
  };

  const handleRemoveFromCart = (payload) => {
    handleRemoveFromCart(payload)
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        viewType="offer-only"
        data={userAndPolicyData} // data is passed in, if any fields are invalid, they will be displayed to user to rectify before purchasing.
        onOptIn={handleAddToCart}
        onOptOut={handleRemoveFromCart}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;
```

* * *

## 预填数据

在任何已经为优化用户体验而收集的客户和政策数据中传递数据是最佳做法. 除非视图Type是 `offer-only`,用户可以查看并编辑任何通过的数据.

数据遵循应用程序对象结构. 参见您的特定ION(或提供)文档.

```javascript
import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  const data = {
    customer: {
      firstName: 'customer first name',
      lastName: 'customer last name',
      address: {
        line1: 'street address',
        city: 'city',
        state: 'state',
        zip: 'zip',
      }
    },
    policy: {
      startDate: '12/31/2022',
    }
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        data={data}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;
```

* * *

## 样式

Buddy的提供元素支持广泛的视觉定制,使您能够将您的站点设计与主题道具无缝匹配.

1.  选择一个基础主题和颜色调色板 : 快速运行,选择预建的主题和调色板,最接近您的网站.
    
2.  通过添加更进一步自定义 [覆盖](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-overrides)数字 : 几乎任何财产都可以使用 [CSS 对象样式](https://emotion.sh/docs/object-styles)。 。 。 .
    

```javascript
import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  const customTheme = {
    baseTheme: "base",
    palette: "buddy",
    overrides: {
      webFonts: [
        'https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap',
      ],
      styles: {
        h1: {
          color: 'var(--color-text-primary)',
          fontFamily: 'Rubik, sans-serif',
          fontSize: '2rem',
          '@media (min-width: 992px)': {
            fontSize: '3rem',
          },
          '&:hover': {
            boxShadow: 'none',
            backgroundColor: '#FBF9EF',
          },
        },
        body: { color: '#0A242D' },
        '.input-text': {
          border: 'none',
          color: '#333333',
        }
      },
      colors: { textPrimary: '#0A242D' },
    },
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        theme={customTheme}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;
```

### 颜色调色板

目前我们提供两个彩色调色板.

**基础**数字 :

```
primary: '#000000',
secondary: '#254E70',
tertiary: '#848484',
negative: '#e45b78',
positive: '#A3D9B1',
textPrimary: '#000',
textSecondary: '848484',
backgroundPrimary: '#fff',
backgroundSecondary: '#7d8387',
```

**哥们**数字 :

初级: '#DC5648', 中学: '0A242D99', 高等学校: '#46460E33', 负:"#D62719", 阳性:"#A3D9B1", 文本初级 : '# 0A242D', 文本倒数第二: '# 0A242D99', 背景初级 : “ 线性梯度 (# D6F1F2, #F8F6D2) ” , 二次:“#FBF9EF”,

### 覆盖

覆盖对象由三个主要属性组成:

`webFonts`: 用于网页字体的字符串 URL 阵列. _注意:如果使用网页字体,仍有必要设置 `fontFamily` 属性._

`styles`: CSS 样式对象,在特定主题上具有任何 CSS 覆盖功能. 样式将覆盖现有的主题样式。 媒体查询和孩子选择器可以作为字符串密钥名访问,并在给定选择器内嵌入(参见上例). [构成部分类别](https://npmcn.com/package/%40buddy-technology/offer-component/#readme-classes-and-components) 也可以在样式对象内被操纵.

`colors`: 颜色对象将覆盖下表中的任何颜色属性:

| 密钥 | 在使用时 |
| --- | --- |
| 小学 | 图形、调用、主按钮 |
| 中学 | 重点边界、口音 |
| 高等教育 | 非活动口音 |
| 负数 | 错误消息( 注: 此信息目前设定为" 可访问的红色" 。 当超过此属性时, 要注意可访问性 ) |
| 正数 | 成功讯息 |
| 文本 | 原始副本 |
| 文本第二个 | 副拷贝,口音 |
| 小学 | 主要背景( 容器) |
| 二级 | 二级背景 |

### 类别和组成部分

一些组件可以通过访问主题对象中的类名来直接修改. 参见以下组件类名称的完整列表.

```javascript
  var customTheme = {
    style: {
      h1: { fontSize: 36 },
      '.button-primary': {
        // custom styles
      },
    },
  };

```

**可用类**

-   纸牌
-   按钮主
-   按钮二级
-   输入文本
-   输入无效
-   输入选择
-   输入标签
-   输入标签无效
-   报价-集装箱
-   字段容器
-   视图容器

* * *

## 获取数据

您可以将任何CRM或分析平台连接到Buddy报价单元中 `onUserEvent` 钩.

`onUserEvent(eventType: string, data: object) ⇒ void`

这个 `onUserEvent` 钩子属性允许您在自定义函数中通过来嵌入您所选择的分析. 仅仅通过一个召回 `onUseEvent` 选项,并获得以下2个参数:

-   **事件类型 :** 字符串解析所发射事件的类型( 如 : “ 在ViewChange ” )
-   **数据**: 含有事件内部数据的对象。 所有数据对象包括时间戳属性.

### 快速实例

```javascript
import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  const handleUserEvent = (payload) => {
    // logs an object with eventType and data to the console
    console.log(payload)
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        viewType="offer-only"
        onUserEvent={handleUserEvent}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;
```

### 事件类型和数据已发射:

我们捕捉到几个用户驱动的事件,每个事件都有不同的可用的相关数据. 仔细查看下面的列表以确定您想要捕获哪些事件以及如何使用数据.

#### `onOfferElementLoad`

当要约元素挂起时触发

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |
| `partnerId` | 字符串 | 合作伙伴标识符 |
| `incomingDataFieldIds` | 字符串 \[\] | 输入数据中包含的字段 id 数组 |

#### `onOfferElementUpdate`

触发当 `data` 更新“提供元素”的道具

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |
| `partnerId` | 字符串 | 合作伙伴标识符 |
| `updatedDataFieldIds` | 字符串 \[\] | 包含在更新数据中的字段 id 数组 |

#### `onViewChange`

用户在相加视图模式下点击新屏幕时触发 .

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `viewId` | 字符串 | 当前视图的编号 |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onScrollToView`

在单页视图模式下触发或滚动到一节.

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `viewId` | 字符串 | 当前视图的编号 |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onQuote`

当应用程序显示获取策略引用时触发

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `pricing` | 编号 | 如果成功,政策的价格 |
| `error` | 字符串 | 如果失败, 解释试图引用时所遇错误类型的信件 |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onCheckout`

检查时触发器

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `checkoutStatus` | 语句 | 一个 `['start', 'success', 'error']` |
| `premium` | 编号 | 购买总额 |
| `error` | 字符串 | 如果失败, 则解释遇到错误类型的信件 |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onFocus`

当输入被聚焦时触发

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `elementId` | 字符串 | 无效字段/输入的编号 |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onBlur`

当输入模糊时触发

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `elementId` | 字符串 | 无效字段/输入的编号 |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onRadioSelection`

选择无线电按钮时触发

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `elementId` | 字符串 | 无效字段/输入的编号 |
| `value` | 任意 | 选定收音机的值 |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onSlide`

修改滑动器输入时触发

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `elementId` | 字符串 | 无效字段/输入的编号 |
| `value` | 任意 | 选定收音机的值 |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onCheckboxSelection`

选中复选框时触发

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `elementId` | 字符串 | 无效字段/输入的编号 |
| `checked` | 布尔 | 是否检查/未检查 |
| `value` | 字符串 | 选定复选框的标签 |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onBlur`

当输入模糊时触发

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `elementId` | 字符串 | 无效字段/输入的编号 |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onValidationError`

当一个输入被触发为无效时触发

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `elementId` | 字符串 | 无效字段/输入的编号 |
| `validationError` | 字符串 | 遇到的验证错误类型 |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onExternalLink`

当一个输入被触发为无效时触发

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `externalLinkUrl` | 字符串 | 链接的url |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

#### `onOptIn`

当用户选择选择“ 只提供报价” 的保险报价时触发

_返回数据_

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `viewId` | 字符串 | 视图的编号 : “ 仅提供 ” |
| `premium` | 编号 | 购买总额 |
| `partnerId` | 字符串 | 用于报价的合伙人id |
| `timestamp` | 编号 | 以毫秒计的事件发生时间戳 |

### Google 分析实例

```javascript
import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  /* This is an example of how you could use these events
  your usage may vary depending on your analytics systems */

  const handleUserEvent = (e) => {
    // this block shows a condition looking for checkout and success, 
    // this is a completed purchase using the GA 'purchase' event for conversion
    if (e.eventType == "onCheckout" && e.data.checkoutStatus == "success") {
      gtag("event", "purchase", {
        transaction_id: e.data.orderID,
        value: e.data.premium,
        items: [{
          item_id: "SKU_12345",
          item_name: '${ion}',
          currency: "USD",
          price: e.data.premium,
        }]
      });
    }

    // This block tracks which views are displayed 
    // this is configured to use the built-in GA event 'screen_view'
    if (e.eventType == "onViewChange") {
      gtag('event', 'screen_view', {
        'app_name': 'in-offer-element',
        'screen_name': e.data.viewID
      });
    }
    // This block tracks when quotes are made
    // This is configured to use a custom event and captures a custom dimension
    if (e.eventType == "onQuote") {
      gtag('event', 'quote', {
        'app_name': 'in-offer-element',
        'price': e.data.pricing,
      });
    }
  }
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        viewType="offer-only"
        onUserEvent={handleUserEvent}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;
```

## 常见问题

### @buddy-technology/offer-component 是什么？

--- 添加的响应组件 哥们 保险网关

### 如何安装 @buddy-technology/offer-component？

在项目目录运行 npm install @buddy-technology/offer-component，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @buddy-technology/offer-component 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @buddy-technology/offer-component 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @buddy-technology/offer-component 可以商用吗？

@buddy-technology/offer-component 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @buddy-technology/offer-component 的下载量有多少？

根据 npm 官方下载统计，@buddy-technology/offer-component 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,016 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @buddy-technology/offer-component 还在维护吗？

最新版本 1\.7\.1 发布于 2026/03/26（7 个月前）；至今共发布 14 个版本，其中过去 12 个月发布了 3 个；首次发布于 2022/09/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。