npm_versionnpm Paragon package page

ProductTour displays a sequence of checkpoints with anchors around the DOM. A ProductTour takes a list of tour objects and will only support one enabled tour at a time. If multiple tours are enabled, ProductTour will only render the first enabled in the tours list.

Checkpoints are rendered in the order they're listed in the checkpoint array. The checkpoint objects themselves have additional props that can override the props defined in ProductTour.

Basic Usage

Any Paragon component or export may be added to the code example.

Theme Variables (SCSS)#

$checkpoint-background-color: $light-300 !default;
$checkpoint-body-color: $gray-700;
$checkpoint-border-color: $brand !default;
$checkpoint-border-width: 8px !default;
$checkpoint-breadcrumb-color: $primary !default;
$checkpoint-arrow-width: 15px !default;
$checkpoint-max-width: 480px !default;
$checkpoint-z-index: 1060 !default;

Props API#

ProductTour Props API
  • tours shape {
    advanceButtonText: node,
    checkpoints: shape {
    advanceButtonText: node,
    body: node,
    dismissButtonText: node,
    endButtonText: node,
    onAdvance: func,
    onDismiss: func,
    onEnd: func,
    placement: enum'top' | 'top-start' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end' | 'bottom' | 'bottom-start' | 'bottom-end',
    target: string Required,
    title: node,
    showDismissButton: bool,
    dismissButtonText: node,
    enabled: bool Required,
    endButtonText: node,
    onDismiss: func,
    onEnd: func,
    onEscape: func,
    startingIndex: number,
    tourId: string Required,
    Default{ advanceButtonText: '', checkpoints: { advanceButtonText: '', body: '', dismissButtonText: '', endButtonText: '', onAdvance: () => {}, onDismiss: () => {}, placement: 'top', title: '', showDismissButton: undefined, }, dismissButtonText: '', endButtonText: '', onDismiss: () => {}, onEnd: () => {}, onEscape: () => {}, startingIndex: 0, }

Usage Insights#


Project NameParagon VersionInstance Count