# @cookiefirst/cookiefirst-react 中文文档

规范地址：https://npmcn.com/package/%40cookiefirst/cookiefirst-react/

版本：1\.1\.0
npm 元数据更新时间：2025-05-12T10:48:42.145Z
中文译文更新时间：2026-11-14T10:07:08.149Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cookiefirst/cookiefirst-react
原文对照：https://npmcn.com/package/%40cookiefirst/cookiefirst-react/?lang=original

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

- 包体积（解压后）：228 kB，35 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=12
- 运行依赖：1 个
- peer 依赖：react \>=16
- 首次发布：2024-06-12T12:14:16.367Z
- 最新版本发布：2025-05-12T10:48:41.942Z
- 近 30 天下载量：2076（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 0 个）

## 中文简介

我们的反应帮助组件 [反应 cookie 同意](https://cookiefirst.com/react-cookie-consent/)由 CookieFirst 的集成能力构建,为管理用户在您的React网站上的同意提供了一个全面的解决方案. 本构成部分h

## 安装

```sh
npm install @cookiefirst/cookiefirst-react
```

也可以使用：`pnpm add @cookiefirst/cookiefirst-react`、`yarn add @cookiefirst/cookiefirst-react`、`bun add @cookiefirst/cookiefirst-react`

## README

# Cookiefirst - 官方反应组件

我们的反应帮助组件 [反应 cookie 同意](https://cookiefirst.com/react-cookie-consent/)由 CookieFirst 的集成能力构建,为管理用户在您的React网站上的同意提供了一个全面的解决方案. 这一组成部分有助于确保遵守国际隐私法,如GDPR、ePrivacy、LGPD和CCPA,允许访问者对您网站使用的饼干和第三方脚本表示同意或更改同意。 CookieFirst是谷歌认证的CMP公司,提供 [谷歌同意模式 v2](https://cookiefirst.com/google-consent-mode-v2-released/) 一体化.

### 关键特性 :

1.  **自动饼干协议**: 根据用户偏好自动管理 cookie 同意.
2.  **定期 Cookie 扫描**: 定期扫描和更新您网站的饼干用量,以确保持续合规.
3.  **自定义 Cookie 旗下**: 方便地在您的网站中添加并定制一个饼干同意横幅,确保用户体验无缝.
4.  **同意管理**: 包括用户通过横幅直接管理其饼干偏好选项.
5.  **与 Google 标签管理器整合**:可与Google Tag管理器和Google同意模式相兼容,使基于用户同意的第三方脚本易于管理.
6.  **多语种支持**:以40多种语言生成自动化饼干政策,迎合全球受众.

# 联系人

如果你有任何问题或想要报告问题,请联系我们 [https://support.cookiefirst.com/hc/en-us/requests/new 页面存档备份,存于互联网档案馆](https://support.cookiefirst.com/hc/en-us/requests/new)

# 最近变动

-   在“ useCookieFirst” 中添加了更具体的返回类型
-   如果横幅无法装入或无法认证的话, 孩子们现在将会被释放

# 目录

-   [安装](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-installation)
-   [使用量](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-usage)
-   [示例](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-example)
-   [属性列表](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-list-of-properties)
-   [属性](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-properties)

# 安装

**无**

```
npm i @cookiefirst/cookiefirst-react
```

**线条**

```
yarn add @cookiefirst/cookiefirst-react
```

## 使用量

```javascript
import { ReactCookieFirst } from '@cookiefirst/cookiefirst-react'

<ReactCookieFirst  url="URL_FROM_ADMIN_PANEL/consent.js">
    {... rest of your app}
</ReactCookieFirst>
```

你可以通过登录到 [https://app.cookiefirst.com/ 页面存档备份,存于互联网档案馆](https://app.cookiefirst.com/)

-   导航到菜单中的“ 域 ”

![domains link](https://consent.cookiefirst.com/npm/npm2.png)

-   在域列表中选择要连接的域的“ 设置”

![domain settings](https://consent.cookiefirst.com/npm/npm3.png)

-   导航到菜单中的“ 嵌入脚本 ”

![embed script link](https://consent.cookiefirst.com/npm/npm4.png)

-   复制 **只是我们** 从嵌入的脚本

![embed script](https://consent.cookiefirst.com/npm/npm6.png)

## 示例

```javascript
import { useCookieFirst } from '@cookiefirst/cookiefirst-react';

const ExampleComponent = () => {
  const { TCFgvl, TCFacceptCategory } = useCookieFirst();

  useEffect(() => {
    if (TCFgvl) {
      TCFacceptCategory([
        ['purposes', 2],
        ['purposes', 1],
        ['purposes', 4],
        ['purposes', 6],
      ]);
    }
  }, [TCFgvl]);
};
```

## 属性列表

#### Cookie 首选中心

-   [打开面板( C)](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-openpanelname)
-   [关闭面板( C)](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-closepanel)

#### 整合设置

-   [隐形模式](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-stealthmode)
-   [更改语言( C)](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-changelanguagelang)

#### 同意属性

-   [同意书](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-consent)
-   [已接受的服务](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-acceptedServices)
-   [更新协议( C)](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-updateconsentconsent-tcfconsent)
-   [同意( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-withdrawconsent)
-   [时间戳](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-consenttimestamp)
-   [接受类别( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-acceptcategorycategorynamenames)
-   [类别( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-declinecategorycategorynamenames)
-   [接受服务( C)](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-acceptserviceserviceservices)
-   [减少服务( C)](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-declineserviceserviceservices)
-   [接受全部类型( C)](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-acceptallcategories)
-   [接受预选类型( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-acceptpreselectedcategories)
-   [否认( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-deny)
-   [递减所有类型 ()](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-declineallcategories)

#### TRF和TCF 同意书

**_注: 下面的函数和属性需要在管理面板中启用 TCF ._**

-   [TCF 同意书](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfconsent)
-   [更新协议( C)](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-updateconsentconsent-tcfconsent)
-   [TCFis 可启用](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfisenabled)
-   [TCF 事件现状](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfeventstatus)
-   [TCF 国家](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfcountry)
-   [TCFgvl 电话](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfgvl)
-   [TCFgatp 图像](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfgatp)
-   [TCFget 同意结构( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfgetconsentstructure)
-   [TCF 接受类别( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfacceptcategorycategorycategories)
-   [TCF 十进制类型( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfdeclinecategorycategorycategories)
-   [TCF 接受类型](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfacceptcategorylegitimateinterestcategorycategories)
-   [TCF 十进制类型](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfdeclinecategorylegitimateinterestcategorycategories)
-   [TCFacceptVendor () (中文(简体) )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfacceptvendorvendorvendors)
-   [TCF 直线Vendor ()](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfdeclinevendorvendorvendors)
-   [TCFacceptVendorLegitimate Interest () (中文(简体) )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfacceptvendorlegitimateinterestvendorvendors)
-   [TCF 直线 VendorLegitimate Interest () 主题](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfdeclinevendorlegitimateinterestvendorvendors)
-   [已接受( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfisvendoracceptedvendorid)
-   [TCFis VendorLegitimate Interest 已接受()](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfisvendorlegitimateinterestacceptedvendorid)
-   [已接受类别( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfiscategoryacceptedname-id)
-   [TCFis 类型 被接受](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfiscategorylegitimateinterestacceptedname-id)
-   [TCFacceptGatpVendor () (中文(简体) )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfacceptgatpvendorvendorvendors)
-   [TCF 底线GatpVendor ()](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfdeclinegatpvendorvendorvendors)
-   [已接受 TCFisGatpVendor( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-tcfisgatpvendoracceptedid)

#### 未分类

-   [访客](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-visitorid)
-   [编译 Embeds ()](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-renderembeds)
-   [获取 LatestScan ()](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-fetchlatestscan)
-   [已更改 View( )](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-notifyviewchanged)

## 属性

### 打开面板( 名称 )

如果当前没有打开, 打开 Cookie 首选中心 .

* * *

-   **"名字"("名字")** _(可选)_: 字符串 - 当首选项中心打开时应该激活的标签的名称 .
    
    可能的值 :
    
    -   "设置",
    -   "饼干",
    -   “政策”

* * *

```javascript
const { openPanel } = useCookieFirst();

// open the Settings tab by default
openPanel();

// open the specified tab
openPanel('cookies');
```

* * *

### 关闭面板( C)

开放时关闭 Cookie 首选中心 . 将会在隐形模式中丢出错误 .

```javascript
const { closePanel } = useCookieFirst();

closePanel();
```

* * *

### 隐形模式

当在"隐形模式"中, Cookie First Banner 不做任何同意-管理接口. 唯一提供的内容是支持它的一页上的饼干声明.

* * *

### 更改语言( lang)

此功能允许开发者切换横幅语言.

**说明:** 我们使用两个字母 [ISO-639-1号标准](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) 密码 例如: `en` 没有 `en-GB`

-   **"长"**: 新语言的字符串-2字母代码.

* * *

### 同意书

获取关于接受类别的信息. 如果你想得到关于接受服务的信息,请前往 [已接受的服务](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-acceptedservices)

如果获得同意,将成为这一结构的目标:

```javascript
{
    necessary: true, // necessary category can't be disabled
    performance: true|false,
    functional: true|false,
    advertising: true|false,
}
```

否则就空了.

```javascript
acceptedCategories === null; // true
```

* * *

### 已接受的服务

获取接受服务的信息.

如果有同意, 被接受的服务将是一个对象, 关键是配置在我们管理面板的第三方脚本部分中的独特脚本标识符, 并且根据该结构中每项服务的接受状况, 数值是真实的还是虚假的 :

```javascript
{
    unique_script_id: true|false,
    other_script_id: true|false,
}
```

否则就空了.

```javascript
acceptedServices === null; // true
```

* * *

### 更新协议( 同意, tCF 同意 ?)

此功能允许开发者更新访问者的同意并设定为给定值.

* * *

-   **"同意" "同意" "concept"** : object - 有新同意信息的object.

```javascript
const { updateConsent } = useCookieFirst();

const newConsent = {
  necessary: true, // necessary category can't be disabled
  performance: true | false,
  functional: true | false,
  advertising: true | false,
};

CookieFirst.updateConsent(newConsent);

// or to update existing

const { updateConsent, consent } = useCookieFirst();

const newConsent = { ...consent };
newConsent.functional = true;
CookieFirst.updateConsent(newConsent);
```

* * *

\* 联合国_要使用此功能, 必须在管理面板中启用 TCF_

-   **"同意书"** _(可选)_: 对象 - 有新tcf同意信息的对象。 由于 tcf 同意有非常深入而详细的结构来创建全新的同意,您可以使用助手函数 [TCFget 协议结构](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-TCFgetConsentStructure)

```javascript
const { consent, updateConsent, TCFconsent } = useCookieFirst();

const newConsentTCF = { ...TCFgetConsentStructure() };
newConsentTCF.vendors = { 1: true, 5: true, 10: true };

updateConsent(consent, newConsentTCF);

// or to update existing
const { consent, updateConsent, TCFconsent } = useCookieFirst();

const newConsentTCF = { ...TCFconsent };
newConsentTCF.vendors[5] = true;
updateConsent(consent, newConsentTCF);
```

* * *

### 同意( )

同意撤销功能将清除访问者的同意,并将这种更改记入我们的同意记录。 完成此动作后,网站会重新加载,允许访问者在域上重新开始. 将再次展示班纳,在游客再次同意之前,不会有任何改变同意的方法.

```javascript
const { withdrawConsent } = useCookieFirst();

withdrawConsent();
```

* * *

### 时间戳

用户同意的时间为毫秒.

```javascript
const { consentTimestamp } = useCookieFirst();
```

* * *

### 接受类别( 类别/ 名称)

此功能允许开发者接受单一或多类

* * *

-   **“ 类别” Name**: 字符串或字符串数组 - 开发者想要的类别的名称/名称
    
    可能的值 :
    
    -   "必须",
    -   "表现",
    -   "职能",
    -   "广告"

```javascript
const { acceptCategory } = useCookieFirst();

acceptCategory('functional');

// or with multiple

acceptCategory(['functional', 'advertising']);
```

* * *

### 类别( 类别/ 名称)

此功能允许开发者拒绝单类或多类

* * *

-   **“ 类别” Name**: 字符串或字符串数组 - 开发者想要的类别的名称/名称
    
    可能的值 :
    
    -   "表现",
    -   "职能",
    -   "广告"

```javascript
const { declineCategory } = useCookieFirst();

declineCategory('functional');

// or with multiple

declineCategory(['functional', 'advertising']);
```

* * *

### 接受服务(服务/服务)

此功能允许开发者通过他们独特的标识符接受指定的服务. 如果同意政策选项被设定为"基于类别"而非"基于服务",则该功能将接受该服务所包括的所有类别.

* * *

-   **"服务"**:字符串或数组字符串 - 唯一应该接受的服务/服务的id.

```javascript
const { acceptService } = useCookieFirst();

acceptService('service_id');

// or with multiple

acceptService(['service_id_1', 'service_id_2']);
```

* * *

### 服务(服务/服务)

这个功能允许开发者通过他们独特的标识符来拒绝指定的服务. 如果将同意政策选项设定为"基于类别"而非"基于服务",则该功能会降低该服务所包括的所有类别.

* * *

-   **"服务"**: 字符串或数组字符串 - 唯一应该被拒绝的服务/服务的id.

```javascript
const { declineService } = useCookieFirst();

declineService('service_id');

// or with multiple

declineService(['service_id_1', 'service_id_2']);
```

* * *

### 接受全部类型( C)

这个功能允许开发者同意所有可用的类饼干.

```javascript
const { acceptAllCategories } = useCookieFirst();

acceptAllCategories();
```

* * *

### 接受预选类型( )

此功能允许开发者仅接受之前在CookieFirst admin面板的域设置屏幕中预选的类别.

```javascript
const { acceptPreselectedCategories } = useCookieFirst();

acceptPreselectedCategories();
```

* * *

### 否认( )

此功能允许开发者完全拒绝同意.

```javascript
const { deny } = useCookieFirst();

deny();
```

* * *

### 递减所有类型 ()

此功能允许开发者只接受必要的类别并降低所有其他类别,并带有一行代码. 虽然这似乎与 [同意](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-withdrawConsent) 功能,它不会完全抹去同意,也不会显示饼干横幅. 它更新了只启用必要饼干的同意.

```javascript
const { declineAllCategories } = useCookieFirst();

declineAllCategories();
```

* * *

**_注:以下功能和属性要求在管理面板中启用 TCF ._**

### TCF 同意书

获取当前TCF同意的信息.

如果获得同意,将成为这一结构的目标:

```javascript
{
    vendors: {},
    categories: {},
    vendorsLegitimateInterest: {},
    categoriesLegitimateInterest: {},
    gatp: {}
}
```

否则就空了.

```javascript
const { TCFconsent } = useCookieFirst();

TCFconsent === null; // true
```

* * *

### TCFis 可启用

管理面板中是否启用了 TCF 信息 .

```javascript
const { TCFisEnabled } = useCookieFirst();
```

* * *

### TCF 事件现状

特克斯和凯科斯群岛一体化的旗帜现状.

可能的值 :

-   装入,
-   脚踏实地,
-   用户动作完成

您可以在官方 IAB 文件中了解更多事件现状 : [这里](https://github.com/InteractiveAdvertisingBureau/GDPR-Transparency-and-Consent-Framework/blob/master/TCFv2/IAB%20Tech%20Lab%20-%20CMP%20API%20v2.md#addeventlistener)

```javascript
const { TCFeventStatus } = useCookieFirst();
```

* * *

### TCF 国家

确定参考立法的国家代码.

```javascript
const { TCFcountry } = useCookieFirst();
```

* * *

### TCFgvl 电话

现有全球供应商名单(GVL),载有所有已登记和核准的供应商、目的、特征、特殊目的、特殊特征、堆积和数据类别的信息.

您可以读取更多关于 GVL [这里](https://github.com/InteractiveAdvertisingBureau/GDPR-Transparency-and-Consent-Framework/blob/master/TCFv2/IAB%20Tech%20Lab%20-%20Consent%20string%20and%20vendor%20list%20formats%20v2.md#the-global-vendor-list) 并检查当前 GVL [这里](https://vendor-list.consensu.org/v3/purposes-en.json)

**注:** **GVL 需要执行任何有关 TCF 同意的行动,所以在试图执行任何有关同意的行动之前,请务必检查是否已经下载过 .**

```javascript
const { TCFgvl, TCFacceptCategory } = useCookieFirst();

if (TCFgvl) {
  TCFacceptCategory([
    ['purposes', 1],
    ['purposes', 3],
    ['purposes', 4],
    ['purposes', 6],
  ]);
}
```

* * *

### TCFgatp 图像

目前Google的Ad Tech提供商(ATP)列表包含所有属于常用列表的Ad技术提供商的信息.

您可以读取更多关于 Google ATP 的信息 [这里](https://support.google.com/admanager/answer/9012903?sjid=3292287987943508236-EU)

**注:** **Google ATP需要执行任何关于Google ATP同意的动作,所以请务必检查它是否已经下载过.**

```javascript
const { TCFgatp, TCFacceptGatpVendor } = useCookieFirst();

if (TCFgatp) {
  TCFacceptGatpVendor([2, 7, 10]);
}
```

* * *

### TCFget 同意结构( )

此功能允许开发者获得 TCF 同意的空结构, 如果您想通过使用函数同时准备并更新整个同意, 将非常有用 [更新协议( C)](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-updateConsent)

示例空结构已显示 [这里](https://npmcn.com/package/%40cookiefirst/cookiefirst-react/#readme-TCFconsent)

* * *

### 类别/类别

此函数允许开发者接受给定的类别或类别列表.

-   **"类"**:数组/数组-单类由类别类型名称和特定类别数量组成.
    
    类型可能值 :
    
    -   "目标",
    -   "特别目的",
    -   "特产",
    -   "特质"

```javascript
const { TCFgvl, TCFacceptCategory } = useCookieFirst();

// single category
if (TCFgvl) {
  TCFacceptCategory(['purposes', 2]);
}

// or with multiple

if (TCFgvl) {
  TCFacceptCategory([
    ['purposes', 1],
    ['purposes', 3],
    ['purposes', 4],
    ['purposes', 6],
  ]);
}
```

* * *

### 类别(类别)

此函数允许开发者拒绝给定的类别或类别列表.

-   **"类"**:数组/数组-单类由类别类型名称和特定类别数量组成.
    
    类型可能值 :
    
    -   "目标",
    -   "特别目的",
    -   "特产",
    -   "特质"

```javascript
const { TCFgvl, TCFdeclineCategory } = useCookieFirst();

// single category
if (TCFgvl) {
  TCFdeclineCategory(['purposes', 2]);
}

// or with multiple

if (TCFgvl) {
  TCFdeclineCategory([
    ['purposes', 1],
    ['purposes', 3],
    ['purposes', 4],
    ['purposes', 6],
  ]);
}
```

* * *

### 类别/类别

此功能允许开发人员接受给定的合法权益类别或合法权益类别的列表.

-   **"类"**:数组/数组-单类由类别类型名称和特定类别数量组成.
    
    类型可能值 :
    
    -   "目标"

```javascript
const { TCFgvl, TCFacceptCategoryLegitimateInterest } = useCookieFirst();

// single category
if (TCFgvl) {
  TCFacceptCategoryLegitimateInterest(['purposes', 2]);
}

// or with multiple

if (TCFgvl) {
  TCFacceptCategoryLegitimateInterest([
    ['purposes', 2],
    ['purposes', 7],
    ['purposes', 8],
  ]);
}
```

* * *

### TCF 十二行分类 合法兴趣(类别)

此功能允许开发人员拒绝给合法权益类别或合法权益类别的列表.

-   **"类"**:数组/数组-单类由类别类型名称和特定类别数量组成.
    
    类型可能值 :
    
    -   "目标",

```javascript
const { TCFgvl, TCFdeclineCategoryLegitimateInterest } = useCookieFirst();

// single category
if (TCFgvl) {
  TCFdeclineCategoryLegitimateInterest(['purposes', 2]);
}

// or with multiple

if (TCFgvl) {
  TCFdeclineCategoryLegitimateInterest([
    ['purposes', 2],
    ['purposes', 7],
    ['purposes', 8],
  ]);
}
```

* * *

### TCFacceptVendor(供应商/供应商)

此功能允许开发者接受给定的供应商或供应商名单

-   **"仇报"**:数字的数目/数量 -- -- 应接受的独特的供应商/供应商编号.

```javascript
const { TCFgvl, TCFacceptVendor } = useCookieFirst();

// single vendor
if (TCFgvl) {
  TCFacceptVendor(10);
}

// or with multiple
if (TCFgvl) {
  TCFacceptVendor([2, 6, 10, 30]);
}
```

* * *

### TCFdectlineVendor(供应商/供应商)

此功能允许开发者拒绝给定的供应商或供应商名单

-   **"仇报"**:数量/数量 -- -- 应减少的销售商/供应商的独特标识.

```javascript
const { TCFgvl, TCFdeclineVendor } = useCookieFirst();

// single vendor
if (TCFgvl) {
  TCFdeclineVendor(10);
}

// or with multiple
if (TCFgvl) {
  TCFdeclineVendor([2, 6, 10, 30]);
}
```

* * *

### TCFacceptVendorLegitimate Interest(供应商/供应商)

此功能允许开发人员接受特定供应商或供应商名单的合法权益

-   **"仇报"**:数字的数目/数量 -- -- 应接受的独特的供应商/供应商编号.

```javascript
const { TCFgvl, TCFacceptVendorLegitimateInterest } = useCookieFirst();

// single vendor
if (TCFgvl) {
  TCFacceptVendorLegitimateInterest(8);
}

// or with multiple
if (TCFgvl) {
  TCFacceptVendorLegitimateInterest([8, 11, 15]);
}
```

* * *

### TCF 十二行 VendorLegitimate Interest(供应商/供应商)

此功能允许开发者拒绝给定供应商或供应商名单的合法权益

-   **"仇报"**:数量/数量 -- -- 应减少的销售商/供应商的独特标识.

```javascript
const { TCFgvl, TCFdeclineVendorLegitimateInterest } = useCookieFirst();

// single vendor
if (TCFgvl) {
  TCFdeclineVendorLegitimateInterest(8);
}

// or with multiple
if (TCFgvl) {
  TCFdeclineVendorLegitimateInterest([8, 11, 15]);
}
```

* * *

### TCFis Vendor 已接受(毒物处理)

此功能允许开发者检查是否有给定ID的供应商被用户接受.

-   **"复仇药"**: 编号 -- -- 独特的供应商编号

```javascript
const { TCFisVendorAccepted } = useCookieFirst();

TCFisVendorAccepted(10); //false or true
```

* * *

### TCFis VendorLegitimate Interest 已接受(供应商)

此功能允许开发者检查是否有用户接受对给定ID的供应商的合法权益.

-   **"复仇药"**: 编号 -- -- 独特的供应商编号

```javascript
const { TCFisVendorLegitimateInterestAccepted } = useCookieFirst();

TCFisVendorLegitimateInterestAccepted(8); //false or true
```

* * *

### TCFisCategory 接受(名称, id)

此功能允许开发者检查是否接受带有特定类别类型和 id 的分类

-   **"名字"("名字")**: 字符串 - 类别类型名称 可能值 :
    -   目的,
    -   特殊目的,
    -   特殊特性
    -   特性
-   **编号**: 数字 - 特定类型类别编号

```javascript
const { TCFisCategoryAccepted } = useCookieFirst();

TCFisCategoryAccepted('specialPurposes', 2); //false or true
```

* * *

### TCFis 类型 被接受的兴趣(名称, id)

此功能允许开发者检查是否接受具有特定类别类型的类的合法权益和 id

-   **"名字"("名字")**: 字符串 - 类别类型名称 可能值 :
    
    -   目的,
-   **编号**: 数字 - 特定类型类别编号
    

```javascript
const { TCFisCategoryLegitimateInterestAccepted } = useCookieFirst();

TCFisCategoryLegitimateInterestAccepted('purposes', 8); //false or true
```

* * *

* * *

### TCFacceptGatpVendor(供应商/供应商)

此功能允许开发者接受 GATP 供应商或 GATP 供应商列表

-   **"仇报"**:数字的数目/数量 -- -- 应接受的GATP供应商/供应商的独特编号.

```javascript
const { TCFgatp, TCFacceptGatpVendor } = useCookieFirst();

// single vendor
if (TCFgatp) {
  TCFacceptGatpVendor(2);
}

// or with multiple
if (TCFgatp) {
  TCFacceptGatpVendor([2, 7, 10]);
}
```

* * *

### TCF 底线GatpVendor( 供应商/ 供应商)

此功能允许开发者拒绝 GATP 供应商或 GATP 供应商列表

-   **"仇报"**: 数字的数目/数量 -- -- 应拒绝的GATP供应商/供应商的独特编号.

```javascript
const { TCFgatp, TCFdeclineGatpVendor } = useCookieFirst();

// single vendor
if (TCFgatp) {
  TCFdeclineGatpVendor(2);
}

// or with multiple
if (TCFgatp) {
  TCFdeclineGatpVendor([2, 7, 10]);
}
```

* * *

### TCFisGatpVendor 已接受(id)

此功能允许开发者检查给定 d 的 GATP 供应商是否已被接受

-   **编号**: 编号 - gatp 供应商的独特标识

```javascript
const { TCFisGatpVendorAccepted } = useCookieFirst();

TCFisGatpVendorAccepted(2); //false or true
```

* * *

### 访客

独特的id,用于链接用户的同意. 当用户与请求接触以撤销/重置时有用 .

```javascript
const { visitorId } = useCookieFirst();
```

* * *

### 编译 Embeds ()

JS API允许您强制渲染嵌入式内容(如饼干政策或饼干表). 这在整合中,在我们的旗子装货时,没有嵌入地的容器。 如果你通过单页应用程序浏览导航,或者仅仅通过简单的JS代码,将它动态地添加到DOM中,可能就是这种情况. 在DOM中加入div后,运行 `renderEmbeds()` 将嵌入内容放入其中.

* * *

### 获取 LatestScan ()

JS API允许您获取您网站上发现的饼干列表以及最新的扫描日期. 为了做到这一点,使用方法。 它将再次承诺作出以下反应:

```javascript
{
  updated_at: "2020-10-29T13:30:23+00:00", // latest scan date and time in ISO 8601
  formatcookies: [], // an array of cookies found on your site together with any custom cookies you may have added as well as our own cookies needed for banner to work
}
```

* * *

### 已更改 View( )

该功能用于SPA. 为了让旗帜知道页面可能已经改变,出现了新的收听者或者用户导航到新的子页面.

* * *

## 常见问题

### @cookiefirst/cookiefirst-react 是什么？

我们的反应帮助组件 反应 cookie 同意由 CookieFirst 的集成能力构建,为管理用户在您的React网站上的同意提供了一个全面的解决方案\. 本构成部分h

### 如何安装 @cookiefirst/cookiefirst-react？

在项目目录运行 npm install @cookiefirst/cookiefirst-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cookiefirst/cookiefirst-react 支持 TypeScript 吗？

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

### @cookiefirst/cookiefirst-react 支持 ESM 还是 CommonJS？

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

### @cookiefirst/cookiefirst-react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=12。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cookiefirst/cookiefirst-react 可以商用吗？

@cookiefirst/cookiefirst-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cookiefirst/cookiefirst-react 的下载量有多少？

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

### @cookiefirst/cookiefirst-react 还在维护吗？

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