# @ariefsn/svelte-use 中文文档

规范地址：https://npmcn.com/package/%40ariefsn/svelte-use/

版本：1\.2\.1
npm 元数据更新时间：2026-09-28T14:46:07.717Z
中文译文更新时间：2026-11-08T03:42:16.865Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40ariefsn/svelte-use
原文对照：https://npmcn.com/package/%40ariefsn/svelte-use/?lang=original
项目主页：https://svelte-use.ariefsn.dev/
源码仓库：https://github.com/ariefsn/svelte-use

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

- 包体积（解压后）：398 kB，281 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：svelte ^5\.0\.0
- 首次发布：2026-02-28T00:59:59.039Z
- 最新版本发布：2026-09-28T14:46:07.341Z
- 近 30 天下载量：1904（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 4 个）

## 中文简介

由VueUses所启发的Svelte 5的活性效用堆肥物收集.

## 安装

```sh
npm install @ariefsn/svelte-use
```

也可以使用：`pnpm add @ariefsn/svelte-use`、`yarn add @ariefsn/svelte-use`、`bun add @ariefsn/svelte-use`

## README

![svelte-use logo](https://raw.githubusercontent.com/ariefsn/svelte-use/main/static/logo.svg)

# @ ariefsn/ svelte- use

收集资料 **100岁以上** Svelte 5 runes- first 通用堆肥.  
没有商店。 无外相依. 安全无虞 满打入.

 [![GitHub](https://img.shields.io/badge/GitHub-ariefsn%2Fsvelte--use-181717?logo=github&logoColor=white)](https://github.com/ariefsn/svelte-use)[![npm version](https://img.shields.io/npm/v/@ariefsn/svelte-use?color=a78bfa&logo=npm&logoColor=white) ](https://www.npmjs.com/package/@ariefsn/svelte-use)[![npm downloads](https://img.shields.io/npm/dm/@ariefsn/svelte-use?color=a78bfa) ](https://www.npmjs.com/package/@ariefsn/svelte-use)![Svelte 5](https://img.shields.io/badge/Svelte-5-FF3E00?logo=svelte&logoColor=white) ![TypeScript](https://img.shields.io/badge/TypeScript-first-3178C6?logo=typescript&logoColor=white)

* * *

## 特征

|  |  |
| --- | --- |
| ⚡ **Svelte 5 运行** | 建造时间 `$state`, (中文(简体) ), `$derived`, (中文(简体) ), `$effect` - 没有仓库 |
| 🌲 **可动摇的树** | 只导入您使用的 |
| 🔒 **完全输入** | 一级脚本, 不 `any` |
| 🌐 **安保部门安全** | 所有浏览器 API 都被守护 |
| 📦 **零分数** | 没有运行时间依赖关系 |
| 🧹 **自动清理** | 在部件被摧毁时删除听众 |

* * *

## 安装

```sh
npm install @ariefsn/svelte-use
# or
pnpm add @ariefsn/svelte-use
# or
bun add @ariefsn/svelte-use
```

> 要求数 **斯维尔特5号** 作为同伴的依赖.

* * *

## 公用事业

### 动画

| 可编曲 | 说明 |
| --- | --- |
| `useAnimate` | 反应网络动画 API 包装器 |
| `useRafFn` | 运行每个动画框的回调 |
| `useParallax` | 基于指针或设备倾斜的平面效果 |
| `useTransition` | 动画数字转换与放松 |

### 自动同步

| 可编曲 | 说明 |
| --- | --- |
| `useFetch` | 用加载/ error 状态进行反应获取 |
| `useWebSocket` | 自动重联的WebSocket反应 |
| `useAsyncState` | 与装入/误入状态反应同步/保证状态 |
| `useEventSource` | 服务器发送事件; 浏览器处理重接 |
| `useBroadcastChannel` | 结构化克隆的跨塔布消息 |
| `useAsyncQueue` | 使用有边界的货币运行同步任务 |

### 时间

| 可编曲 | 说明 |
| --- | --- |
| `useInterval` | 反应间隔计数器 |
| `useIntervalFn` | 运行间隔回调 |
| `useNow` | 反应当前日期 |
| `useTimeout` | 反应超时旗 |
| `useTimeoutFn` | 延迟后运行回调 |
| `useTimeoutPoll` | 播放基于超时间隔的回调 |
| `useTimestamp` | 反应当前时间戳( ms) |

### 状态

| 可编曲 | 说明 |
| --- | --- |
| `useToggle` | 活动布尔切换 |
| `useCounter` | 用 inc/dec/重置反应计数器 |
| `usePrevious` | 跟踪任何被动获取器的上一个值 |
| `useSorted` | 数组的反活动排序副本 |
| `useCycleList` | 以被动方式循环列表 |
| `useCountdown` | 有起站/停站/重置的倒计时器 |
| `useTimeAgo` | 可读取的相对时间字符串 |
| `useAutoResetState` | 声明延迟后自动重置为默认 |
| `useDefaultState` | 无效/ 未定义的倒置状态 |
| `useLastChanged` | 上次反应值变化的时间戳 |
| `useTrackHistory` | 反应值的撤消/重写历史 |
| `useHistoryState` | 有内置撤销/重做历史的状态 |
| `useStateMachine` | 从配置中推断的已打入限定状态机器 |
| `useOffsetPagination` | 倾斜状态, 当总数收缩时自动校正 |
| `useConfirmDialog` | 确认为单一流动 `await` |

### 反应

| 可编曲 | 说明 |
| --- | --- |
| `useDebounce` | 取消任何反应获取器 |
| `useWatch` | 以当前/ 以前的参数监视反应值 |
| `useWhenever` | 当值变为真实时,才注意点火 |
| `useUntil` | 等待反应值达到条件 |
| `useCloned` | 深拷贝反应值,用于编辑缓冲 |

### 浏览器 - 键盘和滚动

| 可编曲 | 说明 |
| --- | --- |
| `useMagicKeys` | 通过代理键盘状态反应——单键或组合键 |
| `useKeyModifier` | 轨道 Ctrl/Shift/Alt/Meta状态 |
| `useScroll` | 滚动位置、方向、边缘到达 |
| `useScrollLock` | 锁定/解锁正文滚动 |
| `useInfiniteScroll` | 容器接近边缘时加载更多内容 |

### 浏览器 — 指针和拖放

| 可编曲 | 说明 |
| --- | --- |
| `useMouse` | 视图端口相对指针位置 |
| `useMousePressed` | 检测鼠标按钮按下状态 |
| `useMouseInElement` | 相对于元素的指向位置 |
| `useDraggable` | 带有轴、 边框、 控件的可拖动全版 |

### 浏览器 — 观察器

| 可编曲 | 说明 |
| --- | --- |
| `useElementSize` | 通过缩放观察员进行反应元素维度 |
| `useElementBounding` | 反应全边框, 位置包含 |
| `useIntersectionObserver` | 通过互通式观测探测 |
| `useResizeObserver` | Raw 调整了观察员的大小, 回调 |
| `useMutationObserver` | DOM 变异观测 |

### 浏览器 - 传感器

| 可编曲 | 说明 |
| --- | --- |
| `useMediaQuery` | 反应跟踪 CSS 媒体查询是否匹配 |
| `useWindowSize` | 反应视图尺寸 |
| `useIdle` | 检测用户闲置状态 |
| `useNetwork` | 网络信息 API (下行链路, RTT, 有效Type) |
| `useGeolocation` | 通过监视进行回放地理定位 |
| `useBreakpoints` | 反应响应断点 |
| `useBrowserLocation` | 反应浏览器位置( URL, 散列, 搜索) |
| `useNavigatorLanguage` | 反应导航语言 |
| `useOnline` | 在线/离线反应状态 |
| `usePageLeave` | 用户离开页面时检测 |
| `useDocumentVisibility` | 反应文档能见度状态 |
| `useWindowFocus` | 跟踪浏览器窗口是否聚焦 |
| `useDeviceMotion` | 设备加速和自转数据 |
| `useDeviceOrientation` | 装置物理取向(α/β/γ) |
| `useDevicePixelRatio` | 用于 Retina 检测的响应设备像素比 |
| `useScreenOrientation` | 屏幕取向和角度, 并锁定 |
| `useGamepad` | Gamepad 状态, 仅在一个连接时进行投票 |
| `useScrollbarWidth` | 测量元素的滚动条宽度 |

### 浏览器 - 存储

| 可编曲 | 说明 |
| --- | --- |
| `useStorage` | 反应网络存储( 本地或会话) |
| `useLocalStorage` | 与安保部门安全有关的局部反应 |
| `useIndexedDB` | 使用 CRUD 查询的回放索引DB( C) |
| `useBase64` | 反应 Base64 编码/解码 |
| `useObjectUrl` | Blob/ 文件的反活动对象 URL |
| `useSessionStorage` | 反应会话与安全部门改革安全 |

### 浏览器 - 交互

| 可编曲 | 说明 |
| --- | --- |
| `useClickOutside` | 检测元素外的点击 |
| `useDropZone` | 有文件/数据支持的拖放区 |
| `useElementHover` | 检测元素的悬停状态 |
| `useFocus` | 元素的反应焦点状态 |
| `useActiveElement` | 跟踪当前全球重点要素 |
| `useLongPress` | 长时间的记者手势检测 |
| `useStartTyping` | 在不可编辑元素上检测打字 |
| `useTextareaAutosize` | 增长文本区域以适应其内容 |
| `useSwipe` | 触摸刷手势检测 |

### 业绩

| 可编曲 | 说明 |
| --- | --- |
| `useFps` | 反应帧每秒计数器 |
| `useThrottleFn` | 调弦任何函数 |
| `useDebounceFn` | 取消任何函数 |
| `useWebWorkerFn` | 运行主线上的自定义函数 |
| `useMemoize` | 以 LRU 参数缓存函数的结果 |

### 虚拟化

| 可编曲 | 说明 |
| --- | --- |
| `useVirtualList` | 高效虚拟列表渲染 |

### 网络 APIs

| 可编曲 | 说明 |
| --- | --- |
| `useClipboard` | 反应剪贴板读取/写入 |
| `useBattery` | 反应电池状态 API |
| `useSpeechRecognition` | 反应网络语音识别 API |
| `useEyeDropper` | 选择颜色的 EyeDropper API |
| `useFileDialog` | 程序文件输入对话框 |
| `useShare` | 本地网络共享 API |
| `useVibrate` | 振动 API |
| `useWebNotification` | 桌面通知 API |
| `usePermission` | 浏览器权限 API |
| `useWakeLock` | 屏幕唤醒锁定 API |
| `useFullscreen` | 显示任何元素全屏, 注意逃逸 |
| `useImage` | 预装图像并跟踪其负载状态 |
| `useSpeechSynthesis` | 文本对语音, 处理音效加载 |
| `useFileSystemAccess` | 读取 **写作** 真实文件( 只有铬) |
| `useSupported` | SSR安全一发特效探测 |
| `useEventListener` | 带有清理的普通事件收听器 |
| `useTextDirection` | 音轨/设置文本方向 |
| `useTextSelection` | 音轨文本选择 |

### 浏览器 - 外观

| 可编曲 | 说明 |
| --- | --- |
| `useColorMode` | 颜色模式 `auto` 分辨率、持久性和同步性 |
| `usePreferredDark` | OS 是否请求暗色方案 |
| `usePreferredColorScheme` | OS 颜色方案为 `dark` 编号 : `light` 编号 : `no-preference` |
| `usePreferredReducedMotion` | 操作系统是否请求减少动议 |
| `usePreferredContrast` | OS 对比偏好,包括强迫颜色 |
| `useCssVar` | 读取和写入 CSS 自定义属性 |

### 浏览器 - 文档

| 可编曲 | 说明 |
| --- | --- |
| `useTitle` | 读写 `document.title`,销毁后恢复 |
| `useFavicon` | 读取和写 favicon , 采用现有的链接 |
| `useStyleTag` | 输入 a `<style>` 元素,由 id 复制 |
| `useScriptTag` | 装入外部脚本, 跨呼叫站点复制 |

### 浏览器 - 媒体

| 可编曲 | 说明 |
| --- | --- |
| `useUserMedia` | 相机和麦克风抓取、设备切换、预览镜像 |
| `useDisplayMedia` | 屏幕抓取提醒浏览器“ 停止共享 ” |
| `useDevicesList` | 按类型分组的媒体设备,刷新于 `devicechange` |

### 主管 & SIO

| 可编曲 | 说明 |
| --- | --- |
| `useSeo` | 将 SEO 元数据分层为构建器,转换成 `<svelte:head>` |
| `Seo` | 构成 `useSeo` 输出——这里唯一的组件 |

### 浏览器 - 导航

| 可编曲 | 说明 |
| --- | --- |
| `useNavigationGuard` | 导航警卫带确认/取消- **需要 SvelteKit 设备** |
| `useUrlSearchParams` | 反应 URL 查询参数,带有历史和散列模式 |

> **说明:** `useNavigationGuard` 是这里唯一不兼容的 纯斯维尔特 进口 `beforeNavigate` 财务报告和审定财务报表 `goto` 从 `$app/navigation`, (中文(简体) ), 因此它只在SvelteKit应用中工作; `@sveltejs/kit` 不是一个已声明的对等方 依赖性。 图书馆里所有其它的混凝土 都在Svelte 5应用中运行.

* * *

## 可编译引用

### `useToggle`

反应布尔切换 .

```ts
import { useToggle } from '@ariefsn/svelte-use';

const { value, toggle, set } = useToggle();
// value → false
toggle(); // value → true
set(false); // value → false
```

| 返回时 | 类型 | 说明 |
| --- | --- | --- |
| `value` | `boolean` (反应) | 当前布尔状态 |
| `toggle` | `() => void` | 翻转值 |
| `set` | `(v: boolean) => void` | 明确设置值 |

* * *

### `useCounter`

反应计数器有递增,减速,并重置.

```ts
import { useCounter } from '@ariefsn/svelte-use';

const { value, inc, dec, reset } = useCounter(0);
inc(); // value → 1
inc(5); // value → 6
dec(3); // value → 3
reset(); // value → 0
```

| 返回时 | 类型 | 说明 |
| --- | --- | --- |
| `value` | `number` (反应) | 现值 |
| `inc` | `(delta?: number) => void` | 递增 `delta` (违约1) |
| `dec` | `(delta?: number) => void` | 递减 `delta` (违约1) |
| `reset` | `() => void` | 重置为初始值 |

* * *

### `usePrevious`

跟踪任何被动获取器的上个值。 回返 `undefined` 直到跟踪值第一次变化.

```ts
import { usePrevious } from '@ariefsn/svelte-use';

let count = $state(0);
const prev = usePrevious(() => count);
// prev() → undefined
count = 1;
// prev() → 0
count = 2;
// prev() → 1
```

| 参数 | 类型 | 说明 |
| --- | --- | --- |
| `getter` | `() => T` | 要观测的活性获取器函数 |

回返a `() => T | undefined` 盖特.

* * *

### `useDebounce`

延迟反应值,直到源在指定期限内停止更改.

```ts
import { useDebounce } from '@ariefsn/svelte-use';

let query = $state('');
const debounced = useDebounce(() => query, 500);
// debounced() updates only after 500 ms of inactivity
```

| 参数 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `getter` | `() => T` | —— 说 | 反作用调试器以解跳 |
| `delay` | `number` | `300` | 以毫秒计的延迟 |

回返a `() => T` 盖特.

* * *

### `useLocalStorage`

反应 `localStorage` 和安保部门的安全。 数值与 `JSON.stringify` 编号 : `JSON.parse`后退至 `initial` 在非浏览器环境中或解析出错.

```ts
import { useLocalStorage } from '@ariefsn/svelte-use';

const theme = useLocalStorage<'light' | 'dark'>('theme', 'light');
theme.set('dark'); // persists to localStorage
theme.value; // 'dark'
```

| 参数 | 类型 | 说明 |
| --- | --- | --- |
| `key` | `string` | `localStorage` 键 |
| `initial` | `T` | 在没有键时或在安全部门改革中时退后 |

| 返回时 | 类型 | 说明 |
| --- | --- | --- |
| `value` | `T` (反应) | 当前存储值 |
| `set` | `(v: T) => void` | 更新并坚持该值 |

* * *

### `useIndexedDB`

具有完整 CRUD,查询和过滤功能的回放索引DB 工具 。 SSR安全——所有操作都是服务器上的无操作. 值幸存的页面刷新并重新启动浏览器 .

```ts
import { useIndexedDB } from '@ariefsn/svelte-use';

interface Note {
    id?: number;
    text: string;
    done: boolean;
}

const db = useIndexedDB<Note>('my-app', 'notes');

// CRUD
await db.add({ text: 'Buy milk', done: false }); // returns generated key
await db.get(1); // Note | undefined
await db.getAll(); // Note[]
await db.update({ id: 1, text: 'Buy milk', done: true });
await db.remove(1);
await db.clear(); // delete all records

// Reactive state (updated automatically after every mutation)
db.items; // Note[]   — all records
db.loading; // boolean
db.error; // Error | null

// Filtering
const pending = await db.query((n) => !n.done); // Note[]
```

**选项**

| 参数 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `dbName` | `string` | —— 说 | 索引数据库名称 |
| `storeName` | `string` | —— 说 | 对象存储站名称 |
| `options.version` | `number` | `1` | Schema 版本( 递增迁移) |
| `options.keyPath` | `string` | `'id'` | 主密钥字段名称 |
| `options.autoIncrement` | `boolean` | `true` | 自动生成数字键 |

**回返**

| 财产/方法 | 类型 | 说明 |
| --- | --- | --- |
| `items` | `T[]` (反应) | 所有已存储的记录; 每次变异后刷新 |
| `loading` | `boolean` (反应) | `true` 当一个同步操作在飞行中 |
| `error` | `Error | null` (反应) | 上次错误,或 `null` |
| `add(record)` | `Promise<IDBValidKey | undefined>` | 插入记录; 返回生成的密钥 |
| `get(key)` | `Promise<T | undefined>` | 按主键获取单张记录 |
| `getAll()` | `Promise<T[]>` | 获取全部记录并同步 `items` |
| `update(record)` | `Promise<void>` | 替换记录( 必须包含密钥字段) |
| `remove(key)` | `Promise<void>` | 按主密钥删除记录 |
| `query(filter)` | `Promise<T[]>` | 匹配上游的返回记录( 不修改) `items`(中文(简体) ) |
| `clear()` | `Promise<void>` | 删除全部记录 |

* * *

### `useSorted`

返回一个数组的被动排序副本。 永远不要变异源.

```ts
import { useSorted } from '@ariefsn/svelte-use';

let items = $state([3, 1, 4, 1, 5]);
const sorted = useSorted(() => items);
// sorted() → [1, 1, 3, 4, 5]

const desc = useSorted(
    () => items,
    (a, b) => b - a
);
```

* * *

### `useCycleList`

循环通过列表 被动反应。 两端环绕.

```ts
import { useCycleList } from '@ariefsn/svelte-use';

const cycle = useCycleList(['light', 'dark', 'system']);
cycle.state(); // → 'light'
cycle.next(); // → 'dark'
cycle.prev(); // → 'light'
cycle.setIndex(2);
```

* * *

### `useCountdown`

倒计时器带有起站/停站/重置.

```ts
import { useCountdown } from '@ariefsn/svelte-use';

const timer = useCountdown(60); // 60s at 1s intervals
timer.start();
timer.count(); // → 60, 59, …, 0
timer.isActive(); // → true
timer.stop();
timer.reset();
```

* * *

### `useTimeAgo`

反应人类可读相对时间字符串.

```ts
import { useTimeAgo } from '@ariefsn/svelte-use';

const ago = useTimeAgo(() => new Date('2024-01-01'));
ago(); // → "1 year ago"
```

* * *

### `useMagicKeys`

通过代理键跟踪任意键或组合.

```ts
import { useMagicKeys } from '@ariefsn/svelte-use';

const keys = useMagicKeys();
keys['ctrl+s'](); // → true while Ctrl+S is held
keys['shift'](); // → true while Shift is held
```

* * *

### `useKeyModifier`

跟踪特定的修饰键态 .

```ts
import { useKeyModifier } from '@ariefsn/svelte-use';

const ctrl = useKeyModifier('ctrl'); // 'ctrl' | 'shift' | 'alt' | 'meta'
ctrl(); // → true while Ctrl is held
```

* * *

### `useScroll`

滚动位置、方向旗、边缘检测任何可滚动元素或 `window`。 。 。 .

```ts
import { useScroll } from '@ariefsn/svelte-use';

const scroll = useScroll(); // window
const elScroll = useScroll(() => myEl, { offset: { bottom: 20 } });

scroll.y(); // → number
scroll.isScrolling(); // → boolean
scroll.arrivedState.bottom(); // → boolean
scroll.directions.down(); // → boolean
scroll.scrollTo({ top: 0 });
```

* * *

### `useMouse`

轨迹视港-相接指针位置.

```ts
import { useMouse } from '@ariefsn/svelte-use';

const mouse = useMouse();
mouse.x(); // → number
mouse.y(); // → number
mouse.sourceType(); // → 'mouse' | 'touch' | null
```

* * *

### `useMousePressed`

检测是否持有鼠标按钮 .

```ts
import { useMousePressed } from '@ariefsn/svelte-use';

const pressed = useMousePressed();
pressed(); // → boolean
```

* * *

### `useDraggable`

全能可拖动有轴限制,有界限,有柄,有回调.

```ts
import { useDraggable } from '@ariefsn/svelte-use';

const drag = useDraggable(() => el, {
    axis: 'x',
    initialValue: { x: 100, y: 100 },
    onEnd: (pos) => console.log(pos)
});

drag.x(); // → number
drag.isDragging(); // → boolean
drag.style(); // → "transform: translate(100px, 0px);"
```

* * *

### `useElementSize`

反应跟踪元素维度通过 `ResizeObserver`。 。 。 .

```ts
import { useElementSize } from '@ariefsn/svelte-use';

const size = useElementSize(() => el);
size.width(); // → number
size.height(); // → number
```

* * *

### `useIntersectionObserver`

视港能见度检测.

```ts
import { useIntersectionObserver } from '@ariefsn/svelte-use';

const { isIntersecting, stop } = useIntersectionObserver(() => el, { threshold: 0.5 });
isIntersecting(); // → boolean
```

* * *

### `useResizeObserver`

原始内容 `ResizeObserver` 以自动清理为包装.

```ts
import { useResizeObserver } from '@ariefsn/svelte-use';

const { stop } = useResizeObserver(
    () => el,
    (entry) => {
        console.log(entry.contentRect.width);
    }
);
```

* * *

### `useMutationObserver`

观察任意节点上的 DOM 突变.

```ts
import { useMutationObserver } from '@ariefsn/svelte-use';

const { stop } = useMutationObserver(
    () => el,
    (mutations) => {
        for (const m of mutations) console.log(m.type);
    },
    { childList: true, subtree: true }
);
```

* * *

### `useIdle`

检测用户不活动.

```ts
import { useIdle } from '@ariefsn/svelte-use';

const { isIdle, reset } = useIdle(5000); // idle after 5s
isIdle(); // → boolean
```

* * *

### `useNetwork`

反应网络信息 API.

```ts
import { useNetwork } from '@ariefsn/svelte-use';

const net = useNetwork();
net.effectiveType(); // → '4g' | '3g' | undefined
net.downlink(); // → Mbps | undefined
net.saveData(); // → boolean | undefined
```

* * *

### `useGeolocation`

通过 `watchPosition`。 。 。 .

```ts
import { useGeolocation } from '@ariefsn/svelte-use';

const geo = useGeolocation({ enableHighAccuracy: true });
geo.coords()?.latitude; // → number | null
geo.error(); // → GeolocationPositionError | null
geo.isSupported(); // → boolean
```

* * *

### `useFetch`

以装入/ error 状态反应获取包装 .

```ts
import { useFetch } from '@ariefsn/svelte-use';

const { data, loading, error, execute } = useFetch<User[]>('/api/users');
// data() → User[] | null
// loading() → boolean
// error() → Error | null
```

* * *

### `useWebSocket`

自动重联的WebSocket反应.

```ts
import { useWebSocket } from '@ariefsn/svelte-use';

const ws = useWebSocket('wss://echo.example.com');
ws.send('hello');
ws.data(); // → last received message
ws.status(); // → 'OPEN' | 'CLOSED' | 'CONNECTING'
```

* * *

### `useAnimate`

反应Web动画 API 包装.

```ts
import { useAnimate } from '@ariefsn/svelte-use';

const { animate, stop } = useAnimate(() => el);
animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300 });
```

* * *

### `useParallax`

基于指针位置或设备倾斜的等效.

```ts
import { useParallax } from '@ariefsn/svelte-use';

const { tilt, roll } = useParallax(() => containerEl);
// tilt() → number  (−0.5 to 0.5)
// roll() → number  (−0.5 to 0.5)
```

* * *

### `useTransition`

动画数字转换与放松.

```ts
import { useTransition } from '@ariefsn/svelte-use';

let target = $state(0);
const animated = useTransition(() => target, { duration: 500 });
// animated() smoothly interpolates to target
```

* * *

### `useInterval`

反应间隔计数器.

```ts
import { useInterval } from '@ariefsn/svelte-use';

const { counter, pause, resume } = useInterval(1000);
counter(); // → increments every second
```

* * *

### `useNow`

反应当前 `Date`。 。 。 .

```ts
import { useNow } from '@ariefsn/svelte-use';

const now = useNow();
now(); // → Date (updated every second by default)
```

* * *

### `useTimestamp`

以毫秒计的反应当前时间戳 .

```ts
import { useTimestamp } from '@ariefsn/svelte-use';

const ts = useTimestamp();
ts(); // → number (ms since epoch)
```

* * *

### `useBreakpoints`

反应响应断点.

```ts
import { useBreakpoints } from '@ariefsn/svelte-use';

const bp = useBreakpoints({ sm: 640, md: 768, lg: 1024 });
bp.lg(); // → true if viewport ≥ 1024px
bp.between('sm', 'lg')(); // → boolean
```

* * *

### `useClipboard`

反应剪贴板读取/写入 .

```ts
import { useClipboard } from '@ariefsn/svelte-use';

const { text, copy, copied } = useClipboard();
copy('Hello!');
copied(); // → true for 1.5s after copy
```

* * *

### `useBattery`

反应电池状态 API.

```ts
import { useBattery } from '@ariefsn/svelte-use';

const battery = useBattery();
battery.level(); // → 0–1
battery.charging(); // → boolean
```

* * *

### `useVirtualList`

大数据集高效虚拟列表渲染.

```ts
import { useVirtualList } from '@ariefsn/svelte-use';

const { list, containerProps, wrapperProps } = useVirtualList(items, { itemHeight: 40 });
// list() → only the visible slice of items
```

* * *

## 发展中国家

```sh
bun install
bun run dev
```

进行测试:

```sh
bun run test
```

## 大楼和出版

```sh
# build the library
bun run build

# publish to npm
npm publish --access public
```

## 链接

-   📦 **无**https://www.npmjs.com/package/@ariefsn/svelte-use
-   🐙 **GitHub 图像**数字 : [https://github.com/ariefsn/svelte-use 页面存档备份,存于互联网档案馆](https://github.com/ariefsn/svelte-use)

## 恒星历史

[![Star History Chart](https://star-history.dera.page/svg?repos=ariefsn/svelte-use)](https://star-history.dera.page/#ariefsn/svelte-use)

## 许可证

[麻省理工学院](https://npmcn.com/package/%40ariefsn/svelte-use/LICENSE.md)

## 常见问题

### @ariefsn/svelte-use 是什么？

由VueUses所启发的Svelte 5的活性效用堆肥物收集\.

### 如何安装 @ariefsn/svelte-use？

在项目目录运行 npm install @ariefsn/svelte-use，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ariefsn/svelte-use 支持 TypeScript 吗？

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

### @ariefsn/svelte-use 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @ariefsn/svelte-use 可以商用吗？

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

### @ariefsn/svelte-use 的下载量有多少？

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

### @ariefsn/svelte-use 还在维护吗？

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