앱에 멋진 투어를 만들어 보세요!

앱을 신규 사용자에게 소개하거나 새로운 기능의 기능을 설명하세요.

하이라이트

• 🎨 사용하기 쉬워: steps만 설정하면 바로 사용할 수 있습니다
• 🔧 커스터마이징 가능: 자신만의 컴포넌트와 스타일을 사용하세요
• ♿ 접근 가능: 포커스 트래핑, 키보드 내비게이션, ARIA 지원
• 📦 **경량화: ** ~v2보다 30% 작은 번들
• 🔄 광범위한 호환성: React 16.8+부터 React 19까지의
• 🖥️ SSR-safe: Next.js, Remix 및 기타 서버 렌더링 프레임워크와 호환

자료

• 문서
• 데모
• v3의 새로운 소식
• 스택블리츠 놀이터

준비

퀵 스타트

컴포넌트 API

훅 API

에이전트 스킬

React Joyride로 AI 비서가 가이드 투어를 구현할 수 있도록 지원합니다.

이 스킬은 AI 비서가 API, 단계 설정, 이벤트, 맞춤 구성 요소, 그리고 일반적인 패턴에 대한 포괄적인 지식을 제공합니다.

v2로부터의 마이그레이션

v2에서 업그레이드하는 자세한 방법은 마이그레이션 가이드를 참고하세요.

면허증

MIT

React Joyride

Create awesome tours for your app!

Showcase your app to new users or explain the functionality of new features.

Highlights

• 🎨 Easy to use: Just set the steps and you’re good to go
• 🔧 Customizable: Use your own components and styles
• ♿ Accessible: Focus trapping, keyboard navigation, and ARIA support
• 📦 Lightweight: ~30% smaller bundle than v2
• 🔄 Broad compatibility: React 16.8+ through React 19
• 🖥️ SSR-safe: Works with Next.js, Remix, and other server-rendering frameworks

Resources

• Documentation
• Demos
• What’s new in v3
• StackBlitz Playground

Setup

npm i react-joyride

Quick Start

Component API

import { Joyride } from 'react-joyride';

const steps = [
  { target: '.my-first-step', content: 'This is my awesome feature!' },
  { target: '.my-other-step', content: 'This is another awesome feature!' },
];

export function App() {
  return (
    
  );
}

Hook API

import { useJoyride } from 'react-joyride';

const steps = [
  { target: '.my-first-step', content: 'This is my awesome feature!' },
  { target: '.my-other-step', content: 'This is another awesome feature!' },
];

export function App() {
  const { controls, state, Tour } = useJoyride({ steps });

  return (
    
  );
}

Agent Skill

Enable AI assistants to implement guided tours with React Joyride.

The skill gives your AI assistant comprehensive knowledge of the API, step configuration, events, custom components, and common patterns.

npx skills add gilbarbara/react-joyride

Migration from v2

Check the migration guide for detailed instructions on upgrading from v2.

License

MIT