[{"_1":2,"_296":-5,"_297":-5},"loaderData",{"_3":4,"_8":9,"_23":24},"root",{"_5":-5,"_6":7},"user","countable",true,"routes/_main",{"_5":-5,"_10":11},"recentPosts",[12,17,20],{"_13":14,"_15":16},"slug","claude-code-channels","title","Claude Code Channels: Pushing Events Into a Session",{"_13":18,"_15":19},"claude-code-monitor-tool","What Claude Code's Monitor Tool Does",{"_13":21,"_15":22},"claude-code-subagent-forking","How Claude Code's Subagent Forking Works","routes/creators.$handle",{"_25":26,"_27":26,"_28":29,"_30":31,"_32":33,"_294":31,"_295":112},"handle","gilbarbara","displayName","profileUrl","https://github.com/gilbarbara","verified",false,"skills",[34],{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_61":62,"_63":64,"_65":66,"_82":83,"_84":-5,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":-5,"_96":97,"_98":26,"_30":31,"_99":31,"_100":88,"_101":102,"_103":88,"_104":88,"_105":106,"_107":108,"_138":139,"_174":175,"_225":226,"_266":267,"_278":279,"_290":291,"_292":293},"id","gh__gilbarbara__react-joyride__skills-react-joyride","react-joyride-gilbarbara","name","React Joyride","canonicalName","react-joyride","tagline","Implement guided tours in your React applications easily.","description","Guide for implementing, configuring, and debugging React Joyride v3 guided tours. Use this skill whenever the user mentions joyride, guided tour, onboarding tour, walkthrough, tooltip tour, step-by-step guide, product tour, or wants to highlight UI elements sequentially. Also use when debugging tour issues like tooltips not appearing, targets not found, or controlled mode problems. This skill covers the useJoyride hook, Joyride component, step configuration, events, controls, custom components, and styling.","longDescription","React Joyride is a library designed for creating guided tours within React applications. It provides two primary APIs: the `useJoyride` hook and the `` component, allowing developers to choose the method that best fits their needs. The library is particularly useful for onboarding new users, showcasing features, or guiding users through complex interfaces by highlighting UI elements sequentially. With a straightforward setup, you can define a series of steps that include target elements and descriptive content, helping users navigate your application more effectively.\n\nThe `useJoyride` hook is the recommended approach for integrating guided tours, as it offers a more flexible and modern way to manage the tour state. It allows you to control the tour's flow, handle events, and manage step configurations directly within your functional components. Alternatively, the `` component can be used for those who prefer a more traditional component-based approach. Both methods support various configurations, including continuous tours, custom styling, and the ability to handle asynchronous actions, making it adaptable to different use cases.\n\nReact Joyride is ideal for developers looking to enhance user experience through guided tours. It is particularly beneficial in applications with complex workflows or new features that require user guidance. By utilizing this library, you can ensure that users are not only aware of the capabilities of your application but are also able to use them effectively. The extensive documentation provides clear examples and explanations, making it easy for developers to implement and customize their tours according to their specific requirements.","primaryCategory","development","subcategory","frontend","secondaryCategories",[],"tags",[56,57,58,59,60],"react","guided-tour","onboarding","ui-highlighting","step-by-step","skillType","workflow","complexity","intermediate","platforms",[67,68,69,70,71,72,73,74,75,76,77,78,79,80,81],"claude-code","claude-desktop","claude-api","codex-cli","cursor","antigravity","github-copilot","windsurf","opencode","cline","roo-code","goose","kiro","continue","trae","delivery","source-link","skillFileUrl","pricing","free","price",0,"thumbnailType","icon","thumbnailIcon","lightbulb","thumbnailColor","blue","thumbnailImageUrl","sellerId","gh__gilbarbara","sellerName","featured","downloads","views",4,"rating","reviewCount","status","active","metrics",{"_109":110,"_111":112,"_113":112,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137},"freshnessScore",75,"mirrorCount",1,"skillCountInRepo","qualityScore",100,"daysSinceUpdate",32,"popularityScore",79,"trustScore",65,"repoOpenIssues",3,"repoStars",7833,"repoWatchers",47,"repoContributors",52,"overallScore",84,"repoCreatedAt","2015-08-28T02:56:09Z","repoForks",592,"repoPushedAt","2026-07-09T16:02:12Z","source",{"_140":26,"_141":142,"_143":144,"_149":41,"_150":-5,"_147":151,"_152":153,"_154":31,"_155":156,"_157":158,"_164":165,"_166":7,"_167":168,"_169":170,"_171":172,"_173":172},"owner","repoUrl","https://github.com/gilbarbara/react-joyride","author",{"_28":29,"_145":146,"_38":26,"_25":26,"_147":148},"avatarUrl","https://github.com/gilbarbara.png","type","User","repo","commitSha","github","branch","main","isOfficial","path","skills/react-joyride","license",{"_38":159,"_160":161,"_162":163},"MIT License","spdxId","MIT","url","https://github.com/gilbarbara/react-joyride/blob/main/LICENSE","sourceUpdatedAt","2026-07-09T16:01:07.000Z","redistributable","permalink","https://github.com/gilbarbara/react-joyride/blob/main/skills/react-joyride/SKILL.md","repoFullName","gilbarbara/react-joyride","lastSyncedAt","2026-08-11T01:27:53.833Z","firstSeenAt","seo",{"_176":177,"_188":189,"_190":191,"_209":-5,"_210":211,"_217":218,"_219":220,"_221":222,"_223":224},"useCases",[178,182,185],{"_15":179,"_180":181},"Onboarding New Users","body","Use React Joyride to guide new users through your application, highlighting key features and functionalities to improve their initial experience.",{"_15":183,"_180":184},"Feature Announcements","Implement a guided tour to showcase new features or updates in your application, ensuring users understand how to utilize them effectively.",{"_15":186,"_180":187},"Complex UI Navigation","For applications with complex navigation or workflows, React Joyride can help users navigate through different sections by providing clear step-by-step instructions.","whenNotToUse","This skill may not be suitable for applications with very simple interfaces where guided tours are unnecessary, or when a different approach to user guidance is preferred.","faqs",[192,197,200,203,206],{"_193":194,"_195":196},"q","What is React Joyride?","a","React Joyride is a library for creating guided tours in React applications, allowing developers to highlight UI elements and provide step-by-step instructions.",{"_193":198,"_195":199},"How do I start using React Joyride?","You can start using React Joyride by installing it via npm or yarn and then importing either the `useJoyride` hook or the `` component into your React application.",{"_193":201,"_195":202},"Can I customize the steps in React Joyride?","Yes, each step in React Joyride can be customized with various options such as content, target, title, and placement, allowing for a tailored user experience.",{"_193":204,"_195":205},"Is React Joyride suitable for complex applications?","Yes, React Joyride is designed to handle complex applications by managing asynchronous actions and providing various configuration options to suit different use cases.",{"_193":207,"_195":208},"Where can I find the documentation for React Joyride?","You can find the official documentation for React Joyride at https://v3.react-joyride.com, which includes getting started guides and detailed API references.","ogImageUrl","keywords",[212,213,214,215,216],"react joyride","guided tours in react","react onboarding tour","ui walkthrough","react tooltip tour","whenToUse","Use React Joyride when you need to create step-by-step guides or walkthroughs for your application, especially during onboarding processes.","metaTitle","React Joyride: Guided Tours for React Apps","problemSolved","This skill simplifies the implementation of guided tours in React applications, enhancing user onboarding and feature discovery.","metaDescription","Easily implement guided tours in your React applications with React Joyride. Enhance user onboarding and experience.","content",{"_227":102,"_228":229,"_249":250,"_259":260,"_261":31,"_262":263,"_264":265},"bundledFiles","fileTree",[230,237,240,243,246],{"_155":231,"_232":233,"_147":234,"_235":236},"SKILL.md","size",15777,"file","language","markdown",{"_155":238,"_232":239,"_147":234,"_235":236},"references/api-events-components.md",4459,{"_155":241,"_232":242,"_147":234,"_235":236},"references/api-props-options.md",6658,{"_155":244,"_232":245,"_147":234,"_235":236},"references/api-step-state-controls.md",4582,{"_155":247,"_232":248,"_147":234,"_235":236},"references/patterns.md",7109,"codeExamples",[251,255,257],{"_235":252,"_253":254},"tsx","snippet","import { useJoyride, STATUS, Status } from 'react-joyride';\n\nfunction App() {\n const { Tour } = useJoyride({\n continuous: true,\n run: true,\n steps: [\n { target: '.my-element', content: 'This is the first step', title: 'Welcome' },\n { target: '#sidebar', content: 'Navigate here', placement: 'right' },\n ],\n onEvent: (data) => {\n if (([STATUS.FINISHED, STATUS.SKIPPED] as Status).includes(data.status)) {\n // Tour ended\n }\n },\n });\n\n return

{Tour}{/* rest of app */}

;\n}",{"_235":252,"_253":256},"import { Joyride, STATUS, Status } from 'react-joyride';\n\nfunction App() {\n return (\n {\n if (([STATUS.FINISHED, STATUS.SKIPPED] as Status).includes(data.status)) {\n // Tour ended\n }\n }}\n />\n );\n}",{"_235":252,"_253":258},"{\n target: '.my-element', // CSS selector, HTMLElement, React ref, or () => HTMLElement\n content: 'Step body text', // ReactNode\n title: 'Optional title', // ReactNode\n placement: 'bottom', // Default. Also: top, left, right, *-start, *-end, auto, center\n id: 'unique-id', // Optional identifier\n data: { custom: 'data' }, // Attached to event callbacks\n}","skillMd","# React Joyride v3\n\nCreate guided tours in React apps. Two public APIs: the `useJoyride()` hook (recommended) and the `` component.\n\nOnline docs: https://v3.react-joyride.com\n\n## Quick Start\n\n### Using the hook (recommended)\n\n```tsx\nimport { useJoyride, STATUS, Status } from 'react-joyride';\n\nfunction App() {\n const { Tour } = useJoyride({\n continuous: true,\n run: true,\n steps: [\n { target: '.my-element', content: 'This is the first step', title: 'Welcome' },\n { target: '#sidebar', content: 'Navigate here', placement: 'right' },\n ],\n onEvent: (data) => {\n if (([STATUS.FINISHED, STATUS.SKIPPED] as Status).includes(data.status)) {\n // Tour ended\n }\n },\n });\n\n return

{Tour}{/* rest of app */}

;\n}\n```\n\n### Using the component\n\n```tsx\nimport { Joyride, STATUS, Status } from 'react-joyride';\n\nfunction App() {\n return (\n {\n if (([STATUS.FINISHED, STATUS.SKIPPED] as Status).includes(data.status)) {\n // Tour ended\n }\n }}\n />\n );\n}\n```\n\nThe hook returns `{ controls, failures, on, state, step, Tour }`. Render `Tour` in your JSX.\n\nDocs: https://v3.react-joyride.com/docs/getting-started\n\n## Core Concepts\n\nThe tour has two state dimensions:\n\n**Tour Status**: `idle -> ready -> waiting -> running <-> paused -> finished | skipped`\n- `idle`: No steps loaded\n- `ready`: Steps loaded, waiting for `run: true`\n- `waiting`: `run=true` but steps loading async (transitions to running when steps arrive)\n- `running`: Tour active\n- `paused`: Tour paused (controlled mode at COMPLETE, or `stop()` called)\n- `finished` / `skipped`: Tour ended\n\n**Step Lifecycle** (per step): `init -> ready -> beacon_before -> beacon -> tooltip_before -> tooltip -> complete`\n- `*_before` phases: scrolling and positioning happen here\n- `beacon`: Pulsing indicator shown (skipped when `continuous` + navigating, `skipBeacon`, or `placement: 'center'`)\n- `tooltip`: The tooltip is visible and interactive\n\nDocs: https://v3.react-joyride.com/docs/how-it-works\n\n## Step Configuration\n\nEach step requires `target` and `content`. All other fields are optional.\n\n```tsx\n{\n target: '.my-element', // CSS selector, HTMLElement, React ref, or () => HTMLElement\n content: 'Step body text', // ReactNode\n title: 'Optional title', // ReactNode\n placement: 'bottom', // Default. Also: top, left, right, *-start, *-end, auto, center\n id: 'unique-id', // Optional identifier\n data: { custom: 'data' }, // Attached to event callbacks\n}\n```\n\n### Target types\n\n```tsx\n// CSS selector\n{ target: '.sidebar-nav' }\n// HTMLElement\n{ target: document.getElementById('my-el') }\n// React ref\nconst ref = useRef(null);\n{ target: ref }\n// Function (evaluated each lifecycle)\n{ target: () => document.querySelector('.dynamic-element') }\n```\n\n### Common step options (override per-step)\n\n| Option | Default | Description |\n|--------|---------|-------------|\n| `placement` | `'bottom'` | Tooltip position. Use `'center'` for modal-style (requires `target: 'body'`) |\n| `skipBeacon` | `false` | Skip beacon, show tooltip directly |\n| `buttons` | `['back','close','primary']` | Buttons in tooltip. Add `'skip'` for skip button |\n| `hideOverlay` | `false` | Don't show dark overlay |\n| `blockTargetInteraction` | `false` | Block clicks on highlighted element |\n| `before` | - | `(data) => Promise` — async hook before step shows |\n| `after` | - | `(data) => void` — fire-and-forget hook after step completes |\n| `skipScroll` | `false` | Don't scroll to target |\n| `scrollTarget` | - | Scroll to this element instead of `target` |\n| `spotlightTarget` | - | Highlight this element instead of `target` |\n| `spotlightPadding` | `10` | Padding around spotlight. Number or `{ top, right, bottom, left }` |\n| `targetWaitTimeout` | `1000` | ms to wait for target to appear. `0` = no waiting |\n| `beforeTimeout` | `5000` | ms to wait for `before` hook. `0` = no timeout |\n\nAll `Options` fields can be set globally via `options` prop or per-step. Per-step values override global.\n\nDocs: https://v3.react-joyride.com/docs/step | https://v3.react-joyride.com/docs/props/options\n\n## Uncontrolled vs Controlled\n\n### Uncontrolled (default — strongly preferred)\n\nThe tour manages step navigation internally. This is the right choice for most use cases.\n\n**The library handles async transitions for you.** If a step needs to wait for a UI change (dropdown opening, data loading, animation), use `before` hooks — the tour waits for the promise to resolve before showing the step. If a target element isn't in the DOM yet, `targetWaitTimeout` (default: 1000ms) handles polling for it. You do NOT need controlled mode for these cases.\n\n```tsx\nconst { Tour } = useJoyride({\n continuous: true,\n run: isRunning,\n steps: [\n { target: '.nav', content: 'Navigation' },\n {\n target: '.dropdown-item',\n content: 'Inside the dropdown',\n before: () => {\n // Open dropdown and wait for animation — tour waits automatically\n openDropdown();\n return new Promise(resolve => setTimeout(resolve, 300));\n },\n after: () => closeDropdown(), // Clean up after step (fire-and-forget)\n },\n { target: '.main-content', content: 'Main content' },\n ],\n onEvent: (data) => {\n if (([STATUS.FINISHED, STATUS.SKIPPED] as Status).includes(data.status)) {\n setIsRunning(false);\n }\n },\n});\n```\n\n### Controlled (with `stepIndex`) — use sparingly\n\nOnly use controlled mode when the parent genuinely needs to manage the step index externally (e.g., syncing with URL params, external state machines, or complex multi-component coordination that `before`/`after` hooks can't handle).\n\n```tsx\nconst [stepIndex, setStepIndex] = useState(0);\nconst [run, setRun] = useState(true);\n\nconst { Tour } = useJoyride({\n continuous: true,\n run,\n stepIndex, // This makes it controlled\n steps,\n onEvent: (data) => {\n const { action, index, status, type } = data;\n\n if (([STATUS.FINISHED, STATUS.SKIPPED] as Status).includes(status)) {\n setRun(false);\n return;\n }\n\n if (type === 'step:after' || type === 'error:target_not_found') {\n setStepIndex(index + (action === 'prev' ? -1 : 1));\n }\n },\n});\n```\n\n**Controlled mode rules:**\n- `go()` and `reset()` are disabled (logged warning)\n- You must update `stepIndex` in response to events\n- The tour pauses at COMPLETE — you must advance it\n- Prefer uncontrolled mode with `before`/`after` hooks unless you have a strong reason for external index management\n\n## Event System\n\n### `onEvent` callback\n\n```tsx\nonEvent: (data: EventData, controls: Controls) => void\n```\n\nThe `data` object contains the full tour state plus event-specific fields. The `controls` object lets you programmatically control the tour.\n\n### Event types (in order per step)\n\n| Event | When |\n|-------|------|\n| `tour:start` | Tour begins |\n| `step:before_hook` | `before` hook is called |\n| `step:before` | Target found, step about to render |\n| `scroll:start` | Scrolling to target |\n| `scroll:end` | Scroll complete |\n| `beacon` | Beacon shown |\n| `tooltip` | Tooltip shown |\n| `step:after` | User navigated (next/prev/close/skip) |\n| `step:after_hook` | `after` hook called |\n| `tour:end` | Tour finished or skipped |\n| `tour:status` | Status changed (on stop/reset) |\n| `error:target_not_found` | Target element not found |\n| `error` | Generic error |\n\n### Event subscription with `on()`\n\n```tsx\nconst { on, Tour } = useJoyride({ ... });\n\nuseEffect(() => {\n const unsubscribe = on('tooltip', (data, controls) => {\n analytics.track('tour_step_viewed', { step: data.index });\n });\n return unsubscribe;\n}, [on]);\n```\n\nDocs: https://v3.react-joyride.com/docs/events\n\n## Controls\n\nAvailable via `useJoyride()` return value or `onEvent` second argument:\n\n| Method | Description |\n|--------|-------------|\n| `next()` | Advance to next step |\n| `prev()` | Go to previous step |\n| `close(origin?)` | Close current step, advance |\n| `skip(origin?)` | Skip the tour entirely |\n| `start(index?)` | Start the tour |\n| `stop(advance?)` | Stop (pause) the tour |\n| `go(index)` | Jump to step (uncontrolled only) |\n| `reset(restart?)` | Reset tour (uncontrolled only) |\n| `open()` | Open tooltip for current step |\n| `info()` | Get current state |\n\nDocs: https://v3.react-joyride.com/docs/hook\n\n## Styling & Theming\n\nThree layers of customization (from simple to full control):\n\n### 1. Color options (simplest)\n\n```tsx\noptions: {\n primaryColor: '#1976d2', // Buttons and beacon\n backgroundColor: '#1a1a2e', // Tooltip background\n textColor: '#ffffff', // Tooltip text\n overlayColor: 'rgba(0,0,0,0.7)', // Overlay backdrop\n arrowColor: '#1a1a2e', // Arrow (match background)\n}\n```\n\n### 2. Styles override\n\n```tsx\nstyles: {\n tooltip: { borderRadius: 12 },\n buttonPrimary: { backgroundColor: '#1976d2' },\n buttonBack: { color: '#666' },\n spotlight: { borderRadius: 8 },\n}\n```\n\nStyle keys: `arrow`, `beacon`, `beaconInner`, `beaconOuter`, `beaconWrapper`, `buttonBack`, `buttonClose`, `buttonPrimary`, `buttonSkip`, `floater`, `loader`, `overlay`, `tooltip`, `tooltipContainer`, `tooltipContent`, `tooltipFooter`, `tooltipFooterSpacer`, `tooltipTitle`\n\n### 3. Custom components (full control)\n\nSee next section.\n\nDocs: https://v3.react-joyride.com/docs/props/styles\n\n## Custom Components\n\nReplace any UI component via props. Each receives render props with step data and button handlers.\n\n### Custom Tooltip\n\n```tsx\nimport type { TooltipRenderProps } from 'react-joyride';\n\nfunction MyTooltip({ backProps, index, primaryProps, size, skipProps, step, tooltipProps }: TooltipRenderProps) {\n return (\n

\n {step.title &&

{step.title}

}\n

{step.content}

\n {index > 0 && }\n \n

\n );\n}\n\n// Usage\n\n```\n\n**Important**: Spread `tooltipProps` on the container (sets `role=\"dialog\"` and `aria-modal`). Spread button props (`backProps`, `primaryProps`, `closeProps`, `skipProps`) on buttons for correct action handling.\n\n### Custom Beacon\n\nMust render a `` (placed inside a `