React Hot Toast 使用教程

最新推荐文章于 2024-08-16 08:01:55 发布

袁耿浩

最新推荐文章于 2024-08-16 08:01:55 发布

阅读量252

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00841/article/details/141152004

版权

React Hot Toast 使用教程

react-hot-toastSmoking Hot React Notifications 🔥 项目地址:https://gitcode.com/gh_mirrors/re/react-hot-toast

1. 项目的目录结构及介绍

React Hot Toast 项目的目录结构如下：

react-hot-toast/
├── assets/
├── github/workflows/
├── site/
├── src/
│   ├── core/
│   ├── hooks/
│   ├── index.tsx
│   ├── toast.tsx
│   ├── types.ts
│   ├── utils.ts
│   └── ...
├── test/
├── .gitignore
├── .npmrc
├── .prettierrc
├── .yarnrc
├── jest.config.js
├── LICENSE
├── package.json
├── pnpm-lock.yaml
├── README.md
├── tsconfig.json
├── tsup.config.ts
└── ...

目录介绍

assets/: 存放项目资源文件。
github/workflows/: 存放 GitHub Actions 的工作流配置文件。
site/: 存放项目文档和示例网站的文件。
src/: 项目的核心源代码文件夹，包含核心功能、钩子、入口文件、类型定义和工具函数等。
test/: 存放测试文件。
.gitignore: Git 忽略文件配置。
.npmrc: npm 配置文件。
.prettierrc: Prettier 代码格式化配置文件。
.yarnrc: Yarn 配置文件。
jest.config.js: Jest 测试框架配置文件。
LICENSE: 项目许可证文件。
package.json: 项目依赖和脚本配置文件。
pnpm-lock.yaml: pnpm 锁定文件。
README.md: 项目说明文档。
tsconfig.json: TypeScript 配置文件。
tsup.config.ts: tsup 打包工具配置文件。

2. 项目的启动文件介绍

React Hot Toast 的启动文件主要是 src/index.tsx，它是项目的入口文件，负责导出主要的功能和组件。

// src/index.tsx

export { Toaster } from './toast';
export { toast } from './core/toast';
export { useToaster } from './hooks/useToaster';
export * from './types';

启动文件介绍

Toaster: 负责渲染所有通知的组件。
toast: 触发通知的主要函数。
useToaster: 自定义钩子，用于管理通知。
types: 导出项目的类型定义。

3. 项目的配置文件介绍

React Hot Toast 的配置文件主要包括 package.json、tsconfig.json 和 tsup.config.ts。

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "react-hot-toast",
  "version": "2.4.1",
  "description": "Smoking Hot React Notifications",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsup",
    "test": "jest",
    "lint": "eslint src --ext .ts,.tsx",
    "format": "prettier --write \"src/**/*.{js,ts,tsx}\""
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "eslint": "^7.23.0",
    "jest": "^26.6.3",
    "prettier": "^2.2.1",
    "tsup": "^4.10.1",
    "typescript": "^4.2.3"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}