@c15t/tastack- start:谭斯塔克 开始饼干旗和饼干同意管理
Cookie旗下,同意对话框,以及TanStack Start的首选中心. 根加载器中的服务器功能解决了每个访问者的同意政策,如欧盟的GDPR选入,因此横幅在第一个HTML中.
c15t用于 2 100个以上地点包括expo.dev, sed.dev, unkey.dev, mintlify.com, 和 sazabi.com.
关键特性
- 与
@tanstack/react-start1.168.60 或后一 1.x 发布,包括 TanStack Start 1.0, 在 React 18 或 19上 - 根路由加载器在服务器上解决了每个访客的政策, 因此横幅在第一个 HTML 中, 不显示为晚
- 您的政策下载时间与
consentManifest()并留在服务器上 - 请求中间软件读取 CDN 位置、 语言和全局隐私控制信头
- 前置页面和静态主机也工作,使用
createConsentRoute()对同一来源的同意请求 - 预建 cookie 横幅、 同意对话框和优先选择中心
- 完全定制设计的无头钩
- 分析、广告和像素通过@c15t/整合跟踪每个访客的选择:Google Tag管理器、Google的同意模式v2、GA4、Meta像素、PostHog等
- IAB TCF 2.4 横幅、对话框和钩子通过@c15t/resact/iab子路径
- 通过@c15t/翻译翻译53种语文
先决条件
@tanstack/react-start1.168.60 或后1.x发布,包括 TanStack Start 1.0@tanstack/react-router1.170.41 或以后的1.x发布, 在版本您的@tanstack/react-start释放取决于。 TanStack Start 1.0 至少需要 1.170.43 (韩语)- Vite 7 或后期, 或 Vite 8 或后期 TanStack Start 1.0
- 反应 18 或 19
- 节点.js 20.19或后期,或为TanStack Start 1.0的节点.js 22.12或后期
- 一个 内部项目 (免费报名). 对于开发和测试,本地模式不需要后端
安装
pnpm add @c15t/tanstack-start
然后将预建的样式表添加到您的 CSS 应用程序级条目 :
/* src/styles.css */
@import "@c15t/tanstack-start/styles.css";
使用几个 C15t 包? 安装 c15t 导入 c15t/tanstack-start 换句话说 这是同一个代码.
使用量
- 设定
VITE_C15T_BACKEND_URL到您的 Inth 后端 URL.env - 添加
consentManifest()从@c15t/tanstack-start/build改为vite.config.ts,在tanstackStart()它在构建时下载您的策略并保存在服务器上
// vite.config.ts
import { consentManifest } from '@c15t/tanstack-start/build';
import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import viteReact from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [consentManifest(), tanstackStart(), viteReact()],
});
- 在根路由加载器中解决同意状态
createConsentStateHandler()在服务器函数中,并传递给ConsentRoot
// src/routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import {
ConsentBanner,
ConsentDialog,
ConsentDialogLink,
ConsentRoot,
} from '@c15t/tanstack-start';
import {
consentLoaderOptions,
createConsentStateHandler,
} from '@c15t/tanstack-start/server';
const getConsentState = createServerFn({ method: 'GET' }).handler(
createConsentStateHandler()
);
export const Route = createRootRoute({
...consentLoaderOptions,
loader: async () => ({ consent: await getConsentState() }),
component: RootComponent,
});
function RootComponent() {
const { consent } = Route.useLoaderData();
return (
<ConsentRoot state={consent}>
<Outlet />
<ConsentBanner />
<ConsentDialog />
<ConsentDialogLink>Privacy settings</ConsentDialogLink>
</ConsentRoot>
);
}
- 关于完整的设置,见 TanStack 开始快速启动
在 Inth 上运行 c15t
c15t需要一个后端来服务政策和保存同意记录. 输入 为您运行它。 它把每个选择都储存在它的区域和政策版本中,审计你的现场,并拉动隐私风险请求,在Pro和以上上,每个地区的同意规则都有管理的政策包。 你不运行同意数据库, 地理检索, 上升时间,或升级.
注册是免费的。 运行 npx @inth/cli c15t 创建项目并设置 c15t,或用手创建并复制其后端 URL.
对于开发和测试,本地模式在浏览器中保留选择,不保存同意记录. 别把它运去生产 它的工厂 local()旧名, offline(),仍然工作,在v4离开.
文档
见 文档 用于指南、API参考和示例.
AI 代理文件
这个软件包以Markdown为载体,与已安装的版本相匹配。 安装后,请指定编码代理 node_modules/@c15t/tanstack-start/AGENTS.md它将每个向导在 node_modules/@c15t/tanstack-start/docs/。 。 。 .
在网络上,每页 c15吨文件 拥有Markdown版本,并且 页:1 全部列出 安装 c15t 代理技能 npx skills add c15t/skills。 。 。 .
支助
- 加入我们 Discord 社区
- 打开我们的问题 GitHub 仓库
- 访问 inth.com (英语) 并使用聊天部件
- 通过电子邮件联系我们的支援团队 支持@inth.com
捐款
警卫
不为安全弱点打开一个公共问题。 私下通过报告 GitHub 的脆弱性报告我们审查所有的报告.
- 不在公共论坛、议题或请求中分担脆弱性
- 给它复制的步骤 和它影响的版本
- 在你透露之前给我们点时间
许可证
由 输入