프로젝트 소개

react-native-spotlight-tour는 스포트라이트 효과로 제품 투어와 소개 워크스루를 만들기 위한 React Native 라이브러리입니다. Android, iOS, 웹과 호환되며, Floating UI를 사용해 강조된 요소 주변에 툴팁 콘텐츠를 배치합니다. 개발자는 TourStep 배열로 투어 단계를 정의하고, SpotlightTourProvider로 애플리케이션 콘텐츠를 감쌉니다. AttachStep 컴포넌트는 UI 요소를 단계 인덱스에 연결하며, useSpotlightTour 훅은 시작, 중지, 다음 단계로 이동, 이전 단계로 돌아가기 같은 컨트롤을 제공합니다. offset, shift, flip을 포함한 Floating UI 미들웨어는 투어 전체에 전역으로 구성하거나 개별 단계에서 재정의할 수 있습니다. 이 라이브러리는 오버레이 색상과 불투명도, 바운스, 페이드, 슬라이드 같은 스포트라이트 모션, 배경 누름 동작을 커스터마이즈할 수 있습니다. 내장된 TourBox 컴포넌트는 제목, 내비게이션 라벨, 스타일링 옵션을 갖춘 구성 가능한 툴팁 컨테이너를 제공합니다. 단계는 렌더링 전에 액션을 실행할 수도 있고 완전히 커스텀 렌더 함수를 사용할 수도 있습니다. 설치는 npm 또는 yarn을 통해 가능합니다. 문서화된 요구 사항은 React 16.8.0 이상, React Native 0.50.0 이상, react-native-svg 12.1.0 이상입니다. 버전 3에서는 패키지 이름을 @stackbuilders/react-native-spotlight-tour에서 react-native-spotlight-tour로 변경하고, 기존 위치 지정 props를 Floating UI 구성으로 대체했습니다. 이 프로젝트는 MIT 라이선스이며 API 문서와 예제 애플리케이션을 포함합니다.