# @collapsed/react 中文文档

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

版本：5\.1\.0
npm 元数据更新时间：2024-12-23T22:33:43.189Z
中文译文更新时间：2026-11-14T16:21:14.246Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：45.5 kB，17 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react ^18 \|\| ^19，react-dom ^18 \|\| ^19
- 首次发布：2023-01-16T00:59:06.619Z
- 最新版本发布：2024-12-23T22:33:42.957Z
- 近 30 天下载量：1982（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

用于创建灵活和可访问扩展/缩放组件的回放自定义.

## 安装

```sh
npm install @collapsed/react
```

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

## README

# 页:1

你也许在找 [反应相撞](https://npmcn.com/package/%40collapsed/react-collapsed)。本软件包(除 [@ collapsed/ core (帮助) @ info](https://npmcn.com/package/%40collapsed/core))是一个WIP重写来创建"香草JS"核心.

* * *

# @ collapsed/ react( 使用 Collapse)

用于创建可访问扩展/缩合组件的回放钩. 使用 CSS 转换自 `0` 改为 `auto`。 。 。 .

## 特征

-   处理你元素的动画高度, `auto` 包括!
-   你控制着UI `useCollapse` 提供必要的道具,您可以控制样式和元素.
-   从盒子里可以进入 - 不需要担心你的倒闭/扩展组件能否进入,因为这能照顾你!
-   不需要动画框架! 仅由 CSS 动画提供动力
-   在类型脚本中写入

## 演示

[看演示网站!](https://react-collapsed.netlify.app/)

[代码箱演示](https://codesandbox.io/s/magical-browser-vibv2?file=/src/App.tsx)

## 安装

```bash
$ npm i @collapsed/react
```

## 使用量

### 简单使用

```js
import React from "react";
import { useCollapse } from "@collapsed/react";

function Demo() {
  const { getCollapseProps, getToggleProps, isExpanded } = useCollapse();

  return (
    <div>
      <button {...getToggleProps()}>
        {isExpanded ? "Collapse" : "Expand"}
      </button>
      <section {...getCollapseProps()}>Collapsed content 🙈</section>
    </div>
  );
}
```

### 自己来控制吧

```js
import React, { useState } from "react";
import { useCollapse } from "@collapsed/react";

function Demo() {
  const [isExpanded, setExpanded] = useState(false);
  const { getCollapseProps, getToggleProps } = useCollapse({ isExpanded });

  return (
    <div>
      <button
        {...getToggleProps({
          onClick: () => setExpanded((prevExpanded) => !prevExpanded),
        })}
      >
        {isExpanded ? "Collapse" : "Expand"}
      </button>
      <section {...getCollapseProps()}>Collapsed content 🙈</section>
    </div>
  );
}
```

## API 密码

`useCollapse` 选择以下选项:

```ts
interface UseCollapseOptions {
  /** If true, the disclosure is expanded. */
  isExpanded?: boolean;
  /**
   * If true, the disclosure is expanded when it initially mounts.
   * @default false
   */
  defaultExpanded?: boolean;
  /** Handler called when the disclosure expands or collapses */
  onExpandedChange?: (state: boolean) => void;
  /** Handler called at each stage of the animation. */
  onTransitionStateChange?: (
    state:
      | "expandStart"
      | "expanding"
      | "expandEnd"
      | "collapseStart"
      | "collapsing"
      | "collapseEnd",
  ) => void;
  /** Timing function for the transition */
  easing?: string;
  /**
   * Duration of the expand/collapse animation.
   * If 'auto', the duration will be calculated based on the height of the collapse element
   */
  duration?: "auto" | number;
  /** Height in pixels that the collapse element collapses to */
  collapsedHeight?: number;
  /**
   * Unique identifier used to for associating elements appropriately for accessibility.
   */
  id?: string;
}
```

并返回以下 API :

```ts
interface CollapseAPI {
  isExpanded: boolean;
  setExpanded: (update: boolean | ((prev: boolean) => boolean)) => void;
  getToggleProps: <T extends HTMLElement>(
    props?: React.ComponentPropsWithoutRef<T> & { refKey?: string },
  ) => React.ComponentPropsWithRef<T>;
  getCollapseProps: <T extends HTMLElement>(
    props?: React.ComponentPropsWithoutRef<T> & { refKey?: string },
  ) => React.ComponentPropsWithRef<T>;
}
```

## 替代解决方案

-   [反应-春季](https://www.react-spring.io/) - JavaScript 动画基于库,有可能有更平滑的动画. 要创建可用的崩溃组件, 还需要做更多的工作 .
-   [反应-活体-高](https://github.com/Stanko/react-animate-height/) - 另一个使用 CSS 向任何高度的动能过渡的库。 它提供组件,而不是钩.

## 财务问题

当我应用垂直 `padding` 到获得 `getCollapseProps`动画很简陋 而且不会一直崩溃 什么情况?

倒塌通过操纵 `height` 属性。 如果一个元素有垂直的粘贴,则会扩大元素的大小,即使它有 `height: 0; overflow: hidden`。 。 。 .

为了避免这种情况,只需将粘接物从元素移动到直接嵌入其中的元素.

```javascript
// from
<div {...getCollapseProps({style: {padding: 20}})}
  This will do weird things
</div>

// to
<div {...getCollapseProps()}
  <div style={{padding: 20}}>
    Much better!
  </div>
</div>
```

## 常见问题

### @collapsed/react 是什么？

用于创建灵活和可访问扩展/缩放组件的回放自定义\.

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

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

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

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

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

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

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

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

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

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

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

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