# @eliseubatista99/react-scaffold-core 中文文档

规范地址：https://npmcn.com/package/%40eliseubatista99/react-scaffold-core/

版本：2\.0\.2
npm 元数据更新时间：2026-10-30T15:55:59.941Z
中文译文更新时间：2026-11-14T09:50:54.421Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：252 kB，128 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：dayjs ^1\.11\.19，react ^19\.1\.0，react-dom ^19\.1\.0，react-slick ^0\.31\.0，react-router-dom ^7\.6\.3
- 首次发布：2025-07-22T10:31:16.447Z
- 最新版本发布：2026-10-30T15:55:59.754Z
- 近 30 天下载量：2086（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：161（近 12 个月 145 个）

## 中文简介

一个提供基本组件,钩子,帮助者和提供者的库来方便地构建React应用程序并避免重复通常的代码.

## 安装

```sh
npm install @eliseubatista99/react-scaffold-core
```

也可以使用：`pnpm add @eliseubatista99/react-scaffold-core`、`yarn add @eliseubatista99/react-scaffold-core`、`bun add @eliseubatista99/react-scaffold-core`

## README

# @eliseubatista99/反应-手腕-核心

可重复使用的组件、钩子、供应商和公用设施 需要帮助。 货包用TypeScript、船舶及其类型申报书写,以及 保留 外部反应和路由器依赖性,以便您的应用程序可以共享其 自己的反应和路由上下文.

## 所需资源

| 同伴依赖关系 | 支持的版本 | 用于 |
| --- | --- | --- |
| `react` | `^19.1.0` | 部件和钩子 |
| `react-dom` | `^19.1.0` | 反应 DOM 渲染 |
| `react-router-dom` | `^7.6.3` | 导航提供者和钩子 |
| `react-slick` | `^0.31.0` | `Carousel` |
| `dayjs` | `^1.11.19` | `TimeHelper` |

在应用程序中安装相容的端点依赖性 . `lodash` 已安装 作为一揽子依赖。 软件包将所需的样式捆绑在一起 `slick-carousel`; 无需添加 `slick-carousel` 您的应用程序.

## 安装

```sh
npm install @eliseubatista99/react-scaffold-core \
  react@^19.1.0 react-dom@^19.1.0 \
  react-router-dom@^7.6.3 react-slick@^0.31.0 dayjs@^1.11.19
```

从应用程序入口导入软件包样式表一次 。 这个 提供 `Carousel`。 。 。 .

```ts
import "@eliseubatista99/react-scaffold-core/dist/react-scaffold-core.css";
```

## 快开始

将应用程序包入 `FeedbackProvider` 用于 `Modal`, (中文(简体) ), `Drawer`, (中文(简体) ), `Toast`, (中文(简体) ), `Loader`,或 `useFeedback`启用 `NavigationRoutes` 在路由器内,您 应用程序已经拥有.

```tsx
import {
  Button,
  FeedbackProvider,
  Modal,
  NavigationRoutes,
  useFeedback,
} from "@eliseubatista99/react-scaffold-core";
import { BrowserRouter } from "react-router-dom";

function Home() {
  const { showItem, hideItem } = useFeedback();

  return (
    <>
      <Button onClick={() => showItem("welcome")}>Open dialog</Button>
      <Modal
        id="welcome"
        aria-label="Welcome"
        onClickOutsideModal={() => hideItem("welcome")}
      >
        <p>Welcome to the app.</p>
        <Button onClick={() => hideItem("welcome")}>Close</Button>
      </Modal>
    </>
  );
}

export function App() {
  return (
    <FeedbackProvider>
      <BrowserRouter>
        <NavigationRoutes routes={[{ path: "/", render: <Home /> }]} />
      </BrowserRouter>
    </FeedbackProvider>
  );
}
```

`NavigationProvider` 也可以作为方便包装,以创建 `BrowserRouter`. 偏爱 `NavigationRoutes` 当路由器设置属于您的 应用程序,或者当使用诸如 `MemoryRouter`。 。 。 .

## API 概览

所有公共出口均可从软件包根得到:

```ts
import { Button, useFetch, TimeHelper } from "@eliseubatista99/react-scaffold-core";
```

### 构成部分

`Button`, (中文(简体) ), `Carousel`, (中文(简体) ), `Checkbox`, (中文(简体) ), `Drawer`, (中文(简体) ), `Form`, (中文(简体) ), `Image`, (中文(简体) ), `InputField`, (中文(简体) ), `Loader`, (中文(简体) ), `Modal`, (中文(简体) ), `NumericInputField`, (中文(简体) ), `PageLayout`, (中文(简体) ), `ProgressBar`, (中文(简体) ), `RadioButton`, (中文(简体) ), `SvgImage`, (中文(简体) ), `TextAreaField`, (中文(简体) ), `Toast`,以及 `Typography`。 。 。 .

组件导出其相关道具类型,包括: `CarouselSlideProps`, (中文(简体) ), `DrawerHandleProps`, (中文(简体) ), `FormSubmitButton`, (中文(简体) ), `FormSubmitSection`,以及 `PageLayoutHeaderAndFooterProps`。 。 。 .

### 钩子

-   `useDidMount` ——为挂载时间设置和清理提供效果帮助.
-   `useDrag` ——指向元素拖曳.
-   `useFetch` — 已输入 `get`, (中文(简体) ), `post`, (中文(简体) ), `put`, (中文(简体) ), `patch`,以及 `delete` 方法。 。 .
-   `useOnScreen` - 观察一个元素与 `IntersectionObserver`。 。 。 .
-   `usePointer` ——观察主指针位置并按住状态.
-   `useResponsive` ——解读取景口维度和可配置断点.
-   `useTranslations` 解决从所提供的语言和字典翻译的问题.

调用部件或自定义钩子的顶级钩子,然后使用它 来自事件处理器或效果的方法:

```tsx
function UsersButton() {
  const { get } = useFetch();

  const loadUsers = async () => {
    const response = await get<User[]>("/api/users", { active: true });
    // Handle response.result, response.statusCode, and response.error.
  };

  return <Button onClick={loadUsers}>Load users</Button>;
}
```

`useFetch` 返回 HTTP 状态代码而不是拒绝 HTTP 错误 回应。 网络错误拒绝承诺; 检查 `statusCode` 财务报告和审定财务报表 `error` 当处理结果时.

### 供应商和导航

-   `FeedbackProvider`, (中文(简体) ), `useFeedback`,以及 `useFeedbackActions` 管理能见度 通过字符串 ID. `useFeedback` 财务报告和审定财务报表 `useFeedbackActions` 必须在下面叫 `FeedbackProvider`。 。 。 .
-   `NavigationRoutes` 宣布现有反应路由器内的路由,并 观察航行历史.
-   `NavigationProvider` 提供遗留的便利设置 `BrowserRouter`。 。 。 .
-   `useNavigation` 提供 `currentPath`,观察到 `history`, (中文(简体) ), `goTo`, (中文(简体) ), `goBack`, (中文(简体) ), 财务报告和审定财务报表 `searchParams`。在兼容的 React 路由器内调用它.

反馈覆盖由他们的ID控制:呼叫 `showItem(id)` 财务报告和审定财务报表 `hideItem(id)` 打开并关闭它们. `Modal` 财务报告和审定财务报表 `Drawer` 需要一个 可通过 `aria-label` 或者说 `aria-labelledby`他们援引 关闭回调但不要隐藏自己; 回调应调用 `hideItem(id)`。 。 。 . `Toast` 在它配置的时间后隐藏自己.

### 帮助者

-   `EmailHelper` - 邮件口罩.
-   `FormsHelper` 从窗体输出中向上查看并读取值.
-   `NumberHelper` ——数字夹克.
-   `ObjectsHelper` ——深度平等比较.
-   `ScrollHelper` 检查、禁用和恢复文档滚动.
-   `TextHelper` ——常见字符串检查和格式化.
-   `TimeHelper` ——日期/时间帮助和同步等.

### 共享类型

软件包导出 `FormFieldConfiguration`, (中文(简体) ), `FormFieldInputData`,以及 `FormFieldOutputData`,加上公共组件、钩子和提供者类型. TypeScript声明文件包含在已发布的包中.

## 无障碍和使用说明

-   给 `Modal` 财务报告和审定财务报表 `Drawer` 可用名称 `aria-label` 或者说 `aria-labelledby`。 。 。 .
-   使用 `Button` 对于动作; 它默认为 `type="button"`设置 `type="submit"` 在提交当地表格时明确.
-   `Form` 收集已命名的本地输入、文本区和选择。 验证 报告 `hasErrors` 改为 `onSubmit`; 并不妨碍回调 运行中,所以在继续提交之前请检查该参数.
-   `RadioButton` 是一个视觉按钮控制器,而不是本地的收音机输入,并且是 未收集为 `Form`。 。 。 .
-   `NavigationRoutes` 只能跟踪在它挂起后观察到的导航。 内容 `history` 不是浏览器完整历史堆栈的副本.

## API 参考

焦点包参考文档组件道具和行为,钩 签名、帮助方法、提供者、共享类型和构建公约:

-   [构成部分](https://npmcn.com/package/%40eliseubatista99/react-scaffold-core/context/components.md)
-   [钩子](https://npmcn.com/package/%40eliseubatista99/react-scaffold-core/context/hooks.md)
-   [帮助者](https://npmcn.com/package/%40eliseubatista99/react-scaffold-core/context/helpers.md)
-   [供应商](https://npmcn.com/package/%40eliseubatista99/react-scaffold-core/context/providers.md)
-   [共享类型](https://npmcn.com/package/%40eliseubatista99/react-scaffold-core/context/types.md)
-   [建立和发展公约](https://npmcn.com/package/%40eliseubatista99/react-scaffold-core/context/build-and-conventions.md)
-   [已知的行为和限制](https://npmcn.com/package/%40eliseubatista99/react-scaffold-core/context/known-issues.md)

## 发展

运行这些命令从 `src/packages/core`数字 :

```sh
npm install
npm run build
npm test
npm run typecheck
npm run lint
```

`npm run build` 生成无害环境管理和普通JS捆绑,类型脚本声明, 软件包样式表 `dist/`。 。 。 . `npm run test:package` 构建软件包 并针对其已出版的捆绑和路由器进行烟雾测试 一体化.

## 许可证

[麻省理工学院](https://npmcn.com/LICENSE)

## 常见问题

### @eliseubatista99/react-scaffold-core 是什么？

一个提供基本组件,钩子,帮助者和提供者的库来方便地构建React应用程序并避免重复通常的代码\.

### 如何安装 @eliseubatista99/react-scaffold-core？

在项目目录运行 npm install @eliseubatista99/react-scaffold-core，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：dayjs（^1\.11\.19）、react（^19\.1\.0）、react-dom（^19\.1\.0）、react-slick（^0\.31\.0）、react-router-dom（^7\.6\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @eliseubatista99/react-scaffold-core 支持 TypeScript 吗？

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

### @eliseubatista99/react-scaffold-core 支持 ESM 还是 CommonJS？

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

### @eliseubatista99/react-scaffold-core 可以商用吗？

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

### @eliseubatista99/react-scaffold-core 的下载量有多少？

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

### @eliseubatista99/react-scaffold-core 还在维护吗？

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