# @base316/react 中文文档

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

版本：0\.8\.1
npm 元数据更新时间：2026-11-07T00:39:34.035Z
中文译文更新时间：2026-11-07T23:17:37.345Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40base316/react
原文对照：https://npmcn.com/package/%40base316/react/?lang=original
项目主页：https://base316.com/
源码仓库：https://github.com/ThinkfleetAI/base316

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

- 包体积（解压后）：2.2 MB，111 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>=18
- 首次发布：2026-09-13T13:37:10.471Z
- 最新版本发布：2026-11-07T00:39:33.867Z
- 近 30 天下载量：2068（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 10 个）

## 中文简介

Drop-in React 组件用于Base316认证和计费.

## 安装

```sh
npm install @base316/react
```

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

## README

# @ base316/ 反应

滴入反应组件用于 [基础316](https://base316.com/) - 注册,注册, 配置、定价和计费,在自己的应用程序中进行而不是 您的用户会被发送到一个页面.

```bash
npm install @base316/react @base316/sdk
```

## 一次包装你的应用

```tsx
import { Base316Provider } from "@base316/react";

export default function App({ children }) {
    return (
        <Base316Provider publishableKey={process.env.NEXT_PUBLIC_BASE316_KEY}>
            {children}
        </Base316Provider>
    );
}
```

提供者持有一个客户端和签名用户会话,并获取 在Base316仪表板上布置的品牌——所以你设定的是 这些组件看起来像这里。 无相相相相相相相相相相相相相相相相相相相相相相相.

## 在自己的页面上签名

```tsx
import { SignIn } from "@base316/react";

export default function LoginPage() {
    return <SignIn onSignedIn={() => router.push("/app")} />;
}
```

这就是整体整合。 没有方向,没有弹出,没有发送的按钮 某人到另一个领域,然后回来。 双因子提示在 当账户注册时.

如果你不想让用户签名, Base316 也主持这些页面: 在仪表盘的链接上指向您的用户,然后他们回来签到.

## 剩下的钱

```tsx
import {
    UserProfile, // email, password, sessions, two-factor
    PricingTable, // your plans, with a checkout button
    SubscriptionManager, // what they are on, and how to change it
    Invoices, // what they have been billed
    Branding, // your logo and name, as configured
} from "@base316/react";
```

## 样式

三种方式,从最少到大多数入侵。 使用第一个有效.

**1\. 仪表板.** 无论你放什么 _登录页面_ - 品牌颜色, 背景、标志——自动到达.

**2\. 联合国. `appearance` 标志.** 无 CSS 写入 :

```tsx
<Base316Provider
  publishableKey={key}
  appearance={{ colorPrimary: "#16a34a", borderRadius: "999px" }}
>
```

**3\. 自己的CSS系统**,目标 `b316-*` 类别名称,或 a `className` 在任意 组件,将您的工具类交给它.

每个颜色、半径和字体都位于 `--b316-*` 定制属性。 没什么 自动继承您的应用程序的样式——默默吸收任意 `body { font }` 财务报告和审定财务报表 `button { }` 规则恰好存在 生成组件 以双方无法预测的方式破解.

## 租户的白标签

当一个企业为别人经营你的产品时——一家公司及其客户——显示 公司在屏幕上的品牌让客户看到:

```tsx
<Base316Provider publishableKey={key} tenant={{ organizationExternalId: firm.id }}>
```

租户自己的品牌,然后是父母的, 然后是你的环境,田地 按领域。 变动 `tenant` 当人员切换团队和每个组件时 复作作诸相. `TeamMembers` 说,当一个团队通过公司联系到 而不是会员.

## 阅读会议

```tsx
import { useSession } from "@base316/react";

function Greeting() {
    const { session, loading } = useSession();

    if (loading) return null;
    return session ? <p>Hello {session.user.email}</p> : <a href="/login">Sign in</a>;
}
```

`loading` 事项:先实现已签出分支,然后进行互换 每个页面都会在已经签名的人身上显示一个登录链接.

## 常见问题

### @base316/react 是什么？

Drop-in React 组件用于Base316认证和计费\.

### 如何安装 @base316/react？

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

### @base316/react 支持 TypeScript 吗？

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

### @base316/react 支持 ESM 还是 CommonJS？

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

### @base316/react 可以商用吗？

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

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

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

### @base316/react 还在维护吗？

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