Создавайте потрясающие туры для своего приложения!

Покажите своё приложение новым пользователям или объясните функциональность новых функций.

Основные моменты

• 🎨 Просто в использовании: Просто настрой steps — и всё готово
• 🔧 Настраиваемое: Используйте свои собственные компоненты и стили
• ♿ Доступно: Фокус-трэпинг, навигация по клавиатуре и поддержка ARIA
• 📦 Лёгкий: ~на 30% меньше, чем v2
• 🔄 Широкая совместимость: React 16.8+ до React 19
• 🖥️ SSR-safe: Работает с Next.js, Remix и другими серверными рендеринговыми фреймворками

Ресурсы

• Документация
• Демо
• Что нового в версии 3
• Площадка StackBlitz

Подготовка

Быстрый старт

API компонентов

API Hook

Агент Скилл

Дайте ИИ-ассистентам возможность реализовывать экскурсии с гидом с помощью React Joyride.

Этот навык даёт вашему AI-ассистенту всесторонние знания об API, конфигурации шагов, событиях, пользовательских компонентах и распространённых шаблонах.

Миграция из v2

Посмотрите руководство по миграции для подробной инструкции по обновлению с версии 2.

Лицензия

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