# @amp-labs/react 中文文档

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

版本：2\.18\.2
npm 元数据更新时间：2026-10-27T22:48:01.575Z
中文译文更新时间：2026-11-06T01:07:48.342Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：8.6 MB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：14 个
- peer 依赖：react \>=18\.0\.0 \<20\.0\.0，react-dom \>=18\.0\.0 \<20\.0\.0
- 首次发布：2023-11-03T20:50:10.561Z
- 最新版本发布：2026-10-27T22:48:01.153Z
- 近 30 天下载量：78165（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：146（近 12 个月 33 个）

## 中文简介

Ampersand React 图书馆.

## 安装

```sh
npm install @amp-labs/react
```

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

## README

  

[![Ampersand logo](https://res.cloudinary.com/dycvts6vp/image/upload/v1723671980/ampersand-logo-black.svg)](https://www.withampersand.com/?utm_source=github&utm_medium=readme&utm_campaign=react&utm_content=logo)  
  

[![Star us on GitHub](https://img.shields.io/github/stars/amp-labs/react?color=FFD700&label=Stars&logo=Github)](https://github.com/amp-labs/react) [![Discord](https://img.shields.io/badge/Join%20The%20Community-black?logo=discord)](https://discord.gg/BWP4BpKHvf) [![Documentation](https://img.shields.io/badge/Read%20our%20Documentation-black?logo=book)](https://docs.withampersand.com/) ![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg) ![License](https://img.shields.io/static/v1?label=license&message=MIT&color=white)

# Ampersand React 库

## 概览

[安珀斯兰](https://withampersand.com/?trk=readme-github-react) 是SaaS公司制造者的一个声明平台,他们正在创建产品集成.

这个寄存器包含Ampersand React库,一组Resact组件,允许你的终端用户安装和管理Ampersand集成.

## 先决条件

-   反应版本 18+

### Next.js App路由器

这个库使用React hooks,浏览器API,以及整个客户端的依赖性,使其成为客户端的库. 当使用 Next.js App 路由器(v13+)时,确保从 `@amp-labs/react` 处于客户边界内.

图书馆包括: `'use client'` 因此,它在大多数情况下应自动发挥作用。 如果遇到 SSR 相关错误,请将您的用法包入客户端组件 :

```tsx
'use client';

import { AmpersandProvider, ConnectProvider } from '@amp-labs/react';

export function MyIntegrationComponent() {
  return (
    <AmpersandProvider options={options}>
      <ConnectProvider /* ... */ />
    </AmpersandProvider>
  );
}
```

### 后遗症 (@amp-labs/ react 1.x.x)

要求数

-   查克拉 2.4.4 - 2.10 (中文(简体) )[https://charkra-ui.com/getting-started 页面存档备份,存于互联网档案馆](https://chakra-ui.com/getting-started)(中文(简体) )
-   Chakra 对等依赖性 : @ emotion/ react, @ emotion/ styled, framer-motion

## 安装

在您的还款中, 使用 `npm` 或者说 `yarn` 安装软件包 [`@amp-labs/react`](https://www.npmjs.com/package/@amp-labs/react)数字 :

```sh
npm install @amp-labs/react
```

```sh
yarn add @amp-labs/react
```

### 从 1.x.x 迁移到 @amp-labs/ react 2.0+

@amp-labs/ react 2.0+ 不再需要 chakra作为依赖. Chakra 依赖关系 (@ chakra-ui/ react@emotion/ react@emotion/ styped framer-motion) (中文(简体) ) 不再需要.

@amp-labs/ react 现在轮船有它自己的样式表 也允许用户覆盖颜色, 字体,以及其它 Cs 变量。 见 [用法变化](https://npmcn.com/package/%40amp-labs/react/#readme-changes-with-2.0)

### 后遗症 (@amp-labs/ react 1.x.x)

如果你在使用纱线,你还必须安装对等依赖.

```
yarn add @amp-labs/react @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

## 使用量

请访问 [我们的文件](https://docs.withampersand.com/v1.0/docs/embeddable-ui-components) 学习如何使用这个图书馆.

### 更改为 2.0

除导入组件外,默认样式表也必须被导入. 您也可以覆盖 `--amp` 默认的 cs 变量 [样式](https://github.com/amp-labs/react/blob/main/src/styles/variables.css) 通过导入您的样式表.

```
import { AmpersandProvider } from '@amp-labs/react';
import '@amp-labs/react/styles'; // amp-labs style sheet
import './App.css'; // optional: your own css override 

const options = {
  project: 'PROJECT', // Your Ampersand project name or ID.
  apiKey: 'API_KEY',// Your Ampersand API key.
};

function App() {
  return (
    // Wrap all your components inside AmpersandProvider.
    // You can either do this at the App level,
    // or further down in the component tree.
    <AmpersandProvider options={options}>
        // You can use any of the Ampersand components here.
        ...
    </AmpersandProvider>
  )
}
```

## 许可证

此寄存器根据 **麻省理工学院许可证**。 。 。 .

阅读此牌照,请查看 [利比里亚](https://github.com/amp-labs/react/blob/main/LICENSE.md)。 。 。 .

## 地方发展

请看 [捐款额](https://github.com/amp-labs/react/blob/main/CONTRIBUTING.md)。 。 。 .

## 常见问题

### @amp-labs/react 是什么？

Ampersand React 图书馆\.

### 如何安装 @amp-labs/react？

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

### @amp-labs/react 支持 TypeScript 吗？

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

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

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

### @amp-labs/react 可以商用吗？

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

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

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

### @amp-labs/react 还在维护吗？

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