Show HN: 현대적인 React 온보딩 투어 라이브러리

Source: Hacker News

아름다운 온보딩 투어와 React용 기능 하이라이트.
의존성이 없습니다. 2018년이 아니라 2026년처럼 보입니다.

런치 비디오 보기

문제

React Joyride — 가장 인기 있는 투어 라이브러리 —는 React 19에서 작동하지 않습니다. 이 라이브러리는 더 이상 사용되지 않는 API(unmountComponentAtNode, unstable_renderSubtreeIntoContainer)를 사용하고 있으며 9개월 이상 업데이트되지 않았습니다. Shepherd.js는 유료 상업 라이선스를 요구합니다. Intro.js는 GPL 라이선스입니다. Driver.js는 React 바인딩이 없습니다. 2025–2026년에 투어 라이브러리를 평가하는 모든 개발자는 같은 벽에 부딪힙니다: 현대적이고 무료이며 React‑네이티브인 것이 없습니다.

react-tourlight가 그 격차를 메웁니다.

설치

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 역할, 스크린리더 알림.
• 작음 – gzipped 기준 약 5 KB 코어 (Joyride 약 30 KB 대비). Floating UI는 선택적 피어 의존성.
• MIT 라이선스 – 상업적 사용 무료. GPL 제한 없음, 유료 티어 없음.

Features

• CSS clip-path 스포트라이트 – GPU 가속, 다크 모드에서도 완벽 (mix-blend-mode 해킹 없음)
• Floating UI 포지셔닝 – 스마트 플립, 시프트, 오버플로우 처리
• 전체 키보드 내비게이션 – 화살표 키, Escape, Tab 포커스 트랩
• 비동기 요소 대기 – MutationObserver 기반, 레이지 로드된 콘텐츠 처리
• 라이트 / 다크 / 커스텀 테마 – OS 선호도 자동 감지 또는 직접 지정
• 반응형 및 모바일 친화적 – 모든 화면 크기에서 작동
• React 19 호환 – 최신 React용으로 구축, 폐기된 API 없음
• i18n 지원 – 모든 버튼 라벨 및 단계 텍스트 커스터마이즈
• 단일 요소 하이라이트 – 전체 투어 없이도 “새로운 기능” 호출 가능
• 커스텀 툴팁 – 완전한 제어를 위한 전체 render‑prop API

비교

문서

전체 문서를 보려면 **react-tourlight.vercel.app**를 방문하세요 — API 레퍼런스, 인터랙티브 예제, 테마 가이드, 접근성 세부 정보, 그리고 Next.js, Remix, shadcn/ui용 레시피.

기여

우리는 기여를 환영합니다! 개발 설정, 프로젝트 구조 및 PR 워크플로에 대해서는 CONTRIBUTING.md 를 참고하세요.

라이선스

MIT