gilbarbara/react-joyride

gilbarbara/react-joyride has 7,891 GitHub stars and 593 forks. GitHot measured 0 stars in 24 hours. Last checked 2026-11-05 20:37 UTC. Last push 2026-07-09.

이 수치를 측정하는 방법

앱에 가이드 투어 만들기

7,891 스타 593 forks

What you can do

🎨 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

측정된 스타 증가

in 24h: 0
in 7 days: 기록 수집 중
in 15 days: 기록 수집 중
in 1 month: 기록 수집 중

서로 겹치는 기간의 순증가량이며 일별 합계가 아닙니다. 측정값이 없으면 비워 둡니다. 스타는 관심도를 나타내며 품질을 보장하지 않습니다.

README.md

Original

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

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 (
    <div>
      <Joyride run steps={steps} />
      {/* your app */}
    </div>
  );
}

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 (
    <div>
      <button onClick={() => controls.start()}>Start Tour</button>
      {Tour}
      {/* your app */}
    </div>
  );
}

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