Show HN：现代 React 入职导览库

Source: Hacker News

为 React 提供的精美引导式教程和功能亮点。
零依赖。外观像是 2026 年的，而不是 2018 年的。

观看发布视频

问题

React Joyride — 最流行的导览库 — 在 React 19 上已损坏。它使用已弃用的 API（unmountComponentAtNode、unstable_renderSubtreeIntoContainer），且已有超过 9 个月未更新。Shepherd.js 需要付费商业许可证。Intro.js 是 GPL 许可证。Driver.js 没有 React 绑定。每位在 2025–2026 年评估导览库的开发者都会遇到同样的壁垒：没有现代、免费且原生支持 React 的方案。

安装

npm install react-tourlight @floating-ui/react-dom

快速入门

import { SpotlightProvider, SpotlightTour, useSpotlight } from 'react-tourlight';
import 'react-tourlight/styles.css';

function App() {
  return (
    
      
      
    
  );
}

function Dashboard() {
  const { start } = useSpotlight();
  return  start('onboarding')}>Start Tour;
}

为什么选择 react-tourlight

你将获得

• 默认美观 – 现代、精致的工具提示，配有平滑的 CSS clip-path 聚光灯过渡。开箱即用的浅色、深色和自定义主题。
• 可访问 – 符合 WCAG 2.1 AA 标准。焦点陷阱、键盘导航、ARIA 角色、屏幕阅读器提示。
• 体积小 – 核心约 5 KB（gzip 后），相比 Joyride 的约 30 KB。Floating UI 为可选的 peer 依赖。
• MIT 许可证 – 商业使用免费。无 GPL 限制，无付费层级。

功能

• CSS clip-path 聚光灯 – GPU 加速，在暗模式下完美（无 mix-blend-mode hack）
• Floating UI 定位 – 智能翻转、偏移和溢出处理
• 完整键盘导航 – 箭头键、Esc、Tab 焦点捕获
• 异步元素等待 – 基于 MutationObserver，处理懒加载内容
• 浅色 / 暗色 / 自定义主题 – 自动检测操作系统偏好或自行提供
• 响应式 & 移动友好 – 适配任何屏幕尺寸
• 兼容 React 19 – 为现代 React 构建，无废弃 API
• i18n 支持 – 自定义所有按钮标签和步骤文本
• 单元素高亮 – 单次 “新功能” 提示，无需完整引导
• 自定义工具提示 – 完整的 render‑prop API，提供完全控制

Comparison

文档

Visit react-tourlight.vercel.app for the full docs — API reference, interactive examples, theming guide, accessibility details, and recipes for Next.js, Remix, and shadcn/ui.

贡献

我们欢迎贡献！请参阅 CONTRIBUTING.md 了解开发设置、项目结构和 PR 工作流。

许可证

MIT