Tour

When To Use

Use when you want to guide users through a product.

Examples

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/non-modal.tsx">Non-modal</code> <code src="./demo/placement.tsx">Placement</code> <code src="./demo/mask.tsx">Custom mask style</code> <code src="./demo/indicator.tsx">Custom indicator</code> <code src="./demo/actions-render.tsx" version="5.25.0">Custom action</code> <code src="./demo/gap.tsx">Custom highlighted area style</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>

API

Common props ref：Common props

Property	Description	Type	Default	Version
arrow	Whether to show the arrow, including the configuration whether to point to the center of the element	`boolean` \| `{ pointAtCenter: boolean }`	`true`
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
closeIcon	Customize close icon	`React.ReactNode`	`true`	5.9.0
disabledInteraction	Disable interaction on highlighted area.	`boolean`	`false`	5.13.0
gap	Control the radius of the highlighted area and the offset between highlighted area and the element.	`{ offset?: number \| [number, number]; radius?: number }`	`{ offset?: 6 ; radius?: 2 }`	5.0.0 (array type `offset`: 5.9.0)
keyboard	Whether to enable keyboard shortcuts	boolean	true	6.2.0
placement	Position of the guide card relative to the target element	`center` \| `left` \| `leftTop` \| `leftBottom` \| `right` \| `rightTop` \| `rightBottom` \| `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight`	`bottom`
onClose	Callback function on shutdown	`Function`	-
onFinish	Callback when the tour is finished	`Function`	-
mask	Whether to enable masking, change mask style and fill color by pass custom props	`boolean \| { style?: React.CSSProperties; color?: string; }`	`true`
type	Type, affects the background color and text color	`default` \| `primary`	`default`
open	Open tour	`boolean`	-
onChange	Callback when the step changes. Current is the previous step	`(current: number) => void`	-
current	What is the current step	`number`	-
scrollIntoViewOptions	support pass custom scrollIntoView options	`boolean \| ScrollIntoViewOptions`	`true`	5.2.0
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
indicatorsRender	custom indicator	`(current: number, total: number) => ReactNode`	-	5.2.0
actionsRender	custom action	`(originNode: ReactNode, info: { current: number, total: number }) => ReactNode`	-	5.25.0
zIndex	Tour's zIndex	number	1001	5.3.0
getPopupContainer	Set the rendering node of Tour floating layer	`(node: HTMLElement) => HTMLElement`	body	5.12.0

TourStep

Property	Description	Type	Default	Version
target	Get the element the guide card points to. Empty makes it show in center of screen	`() => HTMLElement` \| `HTMLElement`	-
arrow	Whether to show the arrow, including the configuration whether to point to the center of the element	`boolean` \| `{ pointAtCenter: boolean}`	`true`
closeIcon	Customize close icon	`React.ReactNode`	`true`	5.9.0
cover	Displayed pictures or videos	`ReactNode`	-
title	title	`ReactNode`	-
description	description	`ReactNode`	-
placement	Position of the guide card relative to the target element	`center` \| `left` \| `leftTop` \| `leftBottom` \| `right` \| `rightTop` \| `rightBottom` \| `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight`	`bottom`
onClose	Callback function on shutdown	`Function`	-
mask	Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour	`boolean \| { style?: React.CSSProperties; color?: string; }`	`true`
type	Type, affects the background color and text color	`default` \| `primary`	`default`
nextButtonProps	Properties of the Next button	`{ children: ReactNode; onClick: Function }`	-
prevButtonProps	Properties of the previous button	`{ children: ReactNode; onClick: Function }`	-
scrollIntoViewOptions	support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour	`boolean \| ScrollIntoViewOptions`	`true`	5.2.0

Semantic DOM

Design Token