@slotjs/hooks 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -0
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,9 +1,51 @@
|
|
|
1
1
|
# @slotjs/hooks
|
|
2
2
|
|
|
3
|
+
`@slotjs/hooks` 目前提供 `useResponsive`，用于根据视口宽度动态设置根节点 `html` 的字体大小，适合基于 `rem` 的响应式布局。
|
|
4
|
+
|
|
3
5
|
```bash
|
|
4
6
|
npm i @slotjs/hooks
|
|
5
7
|
```
|
|
6
8
|
|
|
9
|
+
## useResponsive
|
|
10
|
+
|
|
11
|
+
`useResponsive` 会在组件挂载后立即根据当前视口宽度设置一次 `html` 的 `font-size`，并在窗口尺寸变化时自动更新。
|
|
12
|
+
|
|
13
|
+
计算规则如下：
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
html.style.fontSize = `${baseFontSize * Math.min(clientWidth / baseWidth, 2)}px`;
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
也就是说：
|
|
20
|
+
|
|
21
|
+
- 设计稿宽度等于 `baseWidth` 时，根字体大小为 `baseFontSize`
|
|
22
|
+
- 页面变宽时会按比例放大，但最大只放大到 `2x`
|
|
23
|
+
- 页面变窄时会按比例缩小
|
|
24
|
+
|
|
25
|
+
### TypeScript 签名
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
function useResponsive(baseWidth?: number, baseFontSize?: number): boolean;
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### 参数
|
|
32
|
+
|
|
33
|
+
| 参数 | 类型 | 默认值 | 说明 |
|
|
34
|
+
| --- | --- | --- | --- |
|
|
35
|
+
| `baseWidth` | `number` | `1920` | 设计稿基准宽度 |
|
|
36
|
+
| `baseFontSize` | `number` | `16` | 设计稿基准宽度下的根字体大小 |
|
|
37
|
+
|
|
38
|
+
### 返回值
|
|
39
|
+
|
|
40
|
+
返回 `boolean` 类型的 `isReady`：
|
|
41
|
+
|
|
42
|
+
- `false`：初始字体大小尚未设置完成
|
|
43
|
+
- `true`：已经完成首次计算并设置根字体大小
|
|
44
|
+
|
|
45
|
+
这个返回值适合用来控制首屏渲染，避免依赖 `rem` 的内容在初始化前出现尺寸闪动。
|
|
46
|
+
|
|
47
|
+
### 基础用法
|
|
48
|
+
|
|
7
49
|
```tsx
|
|
8
50
|
import { useResponsive } from "@slotjs/hooks";
|
|
9
51
|
|
|
@@ -17,3 +59,29 @@ const Index: React.FC = () => {
|
|
|
17
59
|
);
|
|
18
60
|
};
|
|
19
61
|
```
|
|
62
|
+
|
|
63
|
+
### 自定义设计稿宽度和基准字号
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import { useResponsive } from "@slotjs/hooks";
|
|
67
|
+
|
|
68
|
+
const Page = () => {
|
|
69
|
+
const isReady = useResponsive(1440, 20);
|
|
70
|
+
|
|
71
|
+
if (!isReady) return null;
|
|
72
|
+
|
|
73
|
+
return <main style={{ fontSize: "1rem" }}>content</main>;
|
|
74
|
+
};
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
在上面的例子里：
|
|
78
|
+
|
|
79
|
+
- 当视口宽度为 `1440px` 时，`html` 根字体大小为 `20px`
|
|
80
|
+
- 当视口宽度为 `720px` 时，根字体大小为 `10px`
|
|
81
|
+
- 当视口宽度大于等于 `2880px` 时，根字体大小封顶为 `40px`
|
|
82
|
+
|
|
83
|
+
### 使用建议
|
|
84
|
+
|
|
85
|
+
- 推荐配合 `rem` 单位使用，这样页面元素会随着根字体大小一起缩放
|
|
86
|
+
- 该 hook 依赖 `window` 和 `document`，应在浏览器环境中使用
|
|
87
|
+
- 如果项目存在 SSR，建议只在客户端渲染阶段调用
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@slotjs/hooks",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "@slotjs/hooks for react",
|
|
7
7
|
"homepage": "https://github.com/slotjs/hooks.git#readme",
|
|
@@ -50,14 +50,14 @@
|
|
|
50
50
|
"dist",
|
|
51
51
|
"README.md"
|
|
52
52
|
],
|
|
53
|
-
"main": "dist/index.umd.
|
|
54
|
-
"module": "dist/index.
|
|
53
|
+
"main": "dist/index.umd.cjs",
|
|
54
|
+
"module": "dist/index.js",
|
|
55
55
|
"types": "dist/types/index.d.ts",
|
|
56
56
|
"exports": {
|
|
57
57
|
".": {
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
58
|
+
"types": "./dist/types/index.d.ts",
|
|
59
|
+
"import": "./dist/index.js",
|
|
60
|
+
"require": "./dist/index.umd.cjs"
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
}
|