Exports
Everything Joyride exports — the component, the hook, constants for event handling, and TypeScript types.
import { Joyride, ACTIONS, EVENTS, STATUS, useJoyride, type EventData } from 'react-joyride';Constants
Objects you can use to compare against values in EventData. All values are as const.
ACTIONS
The action that triggered the state update.
| Constant | Value |
|---|---|
ACTIONS.INIT | 'init' |
ACTIONS.START | 'start' |
ACTIONS.STOP | 'stop' |
ACTIONS.RESET | 'reset' |
ACTIONS.PREV | 'prev' |
ACTIONS.NEXT | 'next' |
ACTIONS.GO | 'go' |
ACTIONS.CLOSE | 'close' |
ACTIONS.SKIP | 'skip' |
ACTIONS.UPDATE | 'update' |
ACTIONS.COMPLETE | 'complete' |
EVENTS
The event type fired via onEvent.
| Constant | Value |
|---|---|
EVENTS.TOUR_START | 'tour:start' |
EVENTS.STEP_BEFORE_HOOK | 'step:before_hook' |
EVENTS.STEP_BEFORE | 'step:before' |
EVENTS.SCROLL_START | 'scroll:start' |
EVENTS.SCROLL_END | 'scroll:end' |
EVENTS.BEACON | 'beacon' |
EVENTS.TOOLTIP | 'tooltip' |
EVENTS.STEP_AFTER | 'step:after' |
EVENTS.STEP_AFTER_HOOK | 'step:after_hook' |
EVENTS.TOUR_END | 'tour:end' |
EVENTS.TOUR_STATUS | 'tour:status' |
EVENTS.TARGET_NOT_FOUND | 'error:target_not_found' |
EVENTS.ERROR | 'error' |
LIFECYCLE
The step's rendering phase. See How It Works for details.
| Constant | Value |
|---|---|
LIFECYCLE.INIT | 'init' |
LIFECYCLE.READY | 'ready' |
LIFECYCLE.BEACON_BEFORE | 'beacon_before' |
LIFECYCLE.BEACON | 'beacon' |
LIFECYCLE.TOOLTIP_BEFORE | 'tooltip_before' |
LIFECYCLE.TOOLTIP | 'tooltip' |
LIFECYCLE.COMPLETE | 'complete' |
ORIGIN
The UI element that triggered the action.
| Constant | Value |
|---|---|
ORIGIN.BUTTON_CLOSE | 'button_close' |
ORIGIN.BUTTON_SKIP | 'button_skip' |
ORIGIN.BUTTON_PRIMARY | 'button_primary' |
ORIGIN.KEYBOARD | 'keyboard' |
ORIGIN.OVERLAY | 'overlay' |
STATUS
The tour's current status. See How It Works for details.
| Constant | Value |
|---|---|
STATUS.IDLE | 'idle' |
STATUS.READY | 'ready' |
STATUS.WAITING | 'waiting' |
STATUS.RUNNING | 'running' |
STATUS.PAUSED | 'paused' |
STATUS.SKIPPED | 'skipped' |
STATUS.FINISHED | 'finished' |
Defaults
The library's default values for options and locale strings. Useful for building config UIs or selectively overriding specific fields.
import { defaultLocale, defaultOptions } from 'react-joyride';defaultOptions
An object containing the default values for all Options fields (colors, sizes, behavior flags, timing, etc.).
defaultLocale
An object containing the default Locale strings (button labels and aria-labels).
Types
All types are exported and can be imported directly:
import type { Step, Options, EventData } from 'react-joyride';Core
| Type | Description |
|---|---|
Step | A step definition (target, content, and optional fields) |
StepMerged | A step with all defaults applied (what you receive in events) |
Options | Theming, behavior, and timing options |
Locale | Tooltip string labels (button text, aria-labels) |
Styles | CSS override keys for tooltip elements |
FloatingOptions | Positioning config via Floating UI |
Props | All props accepted by <Joyride /> and useJoyride() |
SharedProps | Props inherited by both the component and individual steps |
Events
| Type | Description |
|---|---|
EventData | The object received by onEvent |
EventHandler | The onEvent callback signature (data, controls) |
ScrollData | Scroll info on scroll:start / scroll:end events |
TourData | Data passed to before / after step hooks |
Hook
| Type | Description |
|---|---|
Controls | Methods returned by useJoyride() for programmatic navigation |
FailureReason | Union of failure reason strings ('target_not_found' | 'before_hook') |
State | Tour state object (action, index, lifecycle, status, etc.) |
StepFailure | A step that failed during the tour ({ step, reason }) |
UseJoyrideReturn | Full return type of useJoyride() |
Literal Unions
| Type | Description |
|---|---|
Actions | Union of action string values |
Events | Union of event type string values |
Lifecycle | Union of lifecycle phase string values |
Origin | Union of origin string values |
Status | Union of status string values |
Placement | Union of placement string values |
Custom Components
| Type | Description |
|---|---|
ArrowRenderProps | Props passed to a custom arrow component |
BeaconRenderProps | Props passed to a custom beacon component |
LoaderRenderProps | Props passed to a custom loader component |
TooltipRenderProps | Props passed to a custom tooltip component |
Type definitions: types.