Tour
Introduce people to new features using multi-step tours.
Props#
Tour#
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| defaultIsActive | boolean | Activate the tour by default. | |
| initialStep | number | The initial step index. | |
| isActive | boolean | Make the tour controlled. | |
| onComplete | () => void | Called when the last step is completed. | |
| onDismiss | (index: number) => void | Called when the current step is closed or dismissed. | |
| tourRef | RefObject<{ isActive: boolean isCompleted: boolean; targetElement: HTMLElement | null; targetRef: MutableRefObject<HTMLElement | null>; ... 10 more ...; getDismissProps: PropGetterV2<...>; }> |
TourSpotlight#
| Prop | Type | Default | Description |
|---|---|---|---|
| closeOnClick | boolean | ||
| hideOverlay | boolean | ||
| motionPreset | "fade" | "none" | ||
| spacing | number |
Was this helpful?