Guides.js – React

GuidedTour component with smoothScroll

This demo uses the GuidedTour React wrapper with smoothScroll enabled. When a step targets an element off-screen, the page scrolls smoothly and the tip is positioned only after the scroll finishes.

Installation

npm i guides

Usage


import GuidedTour from 'guides/react';

<GuidedTour
  ref={tourRef}
  guides={[
    { html: 'Welcome!' },
    { target: document.querySelector('header'), html: 'Header' }
  ]}
  smoothScroll
  onStart={() => console.log('start')}
  onEnd={() => console.log('end')}
>
  {(tour) => (
    <button onClick={() => tour?.start()}>Start Tour</button>
  )}
</GuidedTour>

Configuration

smoothScroll can be set at the top level (for all guides) or per guide. When enabled, the guide is positioned only after the scroll animation completes.

Methods

Same as the core: start(), end(), next(), prev().