@eliseubatista99/反应-手腕-核心

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

所需资源

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

安装

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。 。 。 .

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

快开始

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

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 概览

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

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 解决从所提供的语言和字典翻译的问题.

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

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 参考

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

• 构成部分
• 钩子
• 帮助者
• 供应商
• 共享类型
• 建立和发展公约
• 已知的行为和限制

发展

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

npm install
npm run build
npm test
npm run typecheck
npm run lint

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

许可证

麻省理工学院