# @foxeian/react-read-more 中文文档

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

版本：1\.1\.5
npm 元数据更新时间：2024-09-17T11:29:10.203Z
中文译文更新时间：2026-11-15T10:36:49.903Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：17.7 kB，15 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>= 17\.0\.0，react-dom \>= 17\.0\.0
- 首次发布：2024-03-13T11:03:14.084Z
- 最新版本发布：2024-09-17T11:29:10.027Z
- 近 30 天下载量：2823（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 0 个）

## 中文简介

一个 React.js 软件包,用于创建带有"多读"按钮的短文本来扩充文本,由TypeScript支持所构建. 这个包提供了一个简单而易于使用的组件,用于用自定义按钮来缩短和扩展文本.

## 安装

```sh
npm install @foxeian/react-read-more
```

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

## README

[![Foxeian Logo](https://npmcn.com/package/%40foxeian/react-read-more/.github/images/foxeian-readme-logo.png)](https://github.com/foxeian/react-read-more)

# 更多读取

![ScreenGIF](https://npmcn.com/package/%40foxeian/react-read-more/.github/images/foxeian-readme-screen.gif)

[快速启动](https://npmcn.com/package/%40foxeian/react-read-more/#readme-quickstart) | [安装](https://npmcn.com/package/%40foxeian/react-read-more/#readme-installation) | [实例](https://npmcn.com/package/%40foxeian/react-read-more/#readme-example-of-readmorearea-customize) | [参数](https://npmcn.com/package/%40foxeian/react-read-more/#readme-parameters)

## 关于

**更多读取** 一个 React.js 软件包,用于创建带有"多读"按钮的短文本来扩充文本,由TypeScript支持所构建. 这个包提供了一个简单而易于使用的组件,用于用自定义按钮来缩短和扩展文本.

### 特征

-   支持类型
-   组件的每个部分( 容器、 文本、 按钮) 可自定义
-   它与服务器侧组件( SSR) 合作
-   支援班(Tailwind、Bootstrap等)
-   简单易用

## 开始

### 安装

要安装软件包 :

```bash
npm install @foxeian/react-read-more
```

### 快速启动

反应组件中的“ Read Morererea” 示例

```tsx
import React from 'react';
import ReadMoreArea from '@foxeian/react-read-more';

export default function App() {
  return (
    <ReadMoreArea
      lettersLimit={100} // limit of letters (100 letters)
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </ReadMoreArea>
  );
}
);
```

## “ 阅读更多区域” 自定义示例

```tsx
import React from 'react';
import ReadMoreArea from '@foxeian/react-read-more';

const buttonStyle = {
  color: "blue",
  fontSize: "1rem",
  padding: "1.5rem",
  // Add any other CSS styles as needed
};

export default function App() {
  return (
    <ReadMoreArea
      className="flex flex-col" // classes styles of main div (tailwind)
      style={{ display: 'flex', flexDirection: 'column' }} // inline styles of main div
      expandLabel="Read more" // Expand Label
      collapseLabel="Read less" // Collapse Label
      textClassName="text-lg text-black" // classes styles of text (tailwind)
      textStyle={{ fontSize: '1rem', color: 'black' }} // inline styles of text
      buttonClassName="text-base text-green-700 p-6" // classes styles of button (tailwind)
      buttonStyle={buttonStyle} // inline styles of button
      lettersLimit={100} // limit of letters (100 letters)
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </ReadMoreArea>
  );
}
);
```

### 参数

| 名称 | 说明 | 类型 | 默认值 |
| --- | :-- | :-- | :-- |
| 类Name | 主 div 的类样式 | 字符串 | 无效 |
| 样式 | 主 div 的内线样式 | CSS 属性 | 无效 |
| 扩展标签 | 扩展标签 | 编号 | `Read more` |
| 折叠标签 | 折叠标签 | 字符串 | `Read less` |
| 文本分类Name | 文本的类样式 | 字符串 | 无效 |
| 文本样式 | 文本的内嵌样式 | CSS 属性 | 无效 |
| 按钮分类Name | 按钮的类样式 | 字符串 | 无效 |
| 按钮样式 | 按钮的内嵌样式 | CSS 属性 | 无效 |
| 字母链接 | 字母限制 | 编号 | 500个 |

## 许可证

麻省理工学院 [伊曼纽尔·埃克桑](https://github.com/foxeian)

## 常见问题

### @foxeian/react-read-more 是什么？

一个 React\.js 软件包,用于创建带有"多读"按钮的短文本来扩充文本,由TypeScript支持所构建\. 这个包提供了一个简单而易于使用的组件,用于用自定义按钮来缩短和扩展文本\.

### 如何安装 @foxeian/react-read-more？

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

### @foxeian/react-read-more 支持 TypeScript 吗？

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

### @foxeian/react-read-more 支持 ESM 还是 CommonJS？

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

### @foxeian/react-read-more 可以商用吗？

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

### @foxeian/react-read-more 的下载量有多少？

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

### @foxeian/react-read-more 还在维护吗？

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