アプリで素晴らしいツアーを作って!

新しいユーザーにアプリを紹介したり、新機能の機能を説明したりしましょう。

ハイライト

• 🎨 使いやすい: stepsを設定すればすぐに使えます
• 🔧 カスタマイズ可能: 自分だけのコンポーネントやスタイルを使いましょう
• ♿ アクセス可能: フォーカストラップ、キーボードナビゲーション、ARIAサポート
• 📦 軽量: ~v2より30%小さい束
• 🔄 広範な互換性: React 16.8+からReact 19まで
• 🖥️ SSR-safe: Next.js、Remix、その他のサーバーレンダリングフレームワークで動作

リソース

• 文書化
• デモ
• v3の新要素
• スタックブリッツ・プレイグラウンド

セットアップ

クイックスタート

コンポーネントAPI

フックAPI

エージェント・スキル

React JoyrideでAIアシスタントがガイドツアーを実装できるようにします。

このスキルは、APIやステップ設定、イベント、カスタムコンポーネント、一般的なパターンについてAIアシスタントに包括的な知識を与えます。

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