NextStepViewport for React

Default Behavior

By default, NextStep uses the document body as the viewport for positioning tour steps. This works well for most cases, but can be problematic when:

• Your target element is inside a scrollable container (like a div with overflow: auto)
• You want the tour step to be positioned relative to a specific container rather than the entire page
• You have complex layouts with nested scrollable areas where the default positioning doesn't work as expected

Using NextStepViewport

The NextStepViewport component allows you to define a custom viewport for your tour steps. Here's how to use it:

import { NextStepViewport } from 'nextstepjs';

// In your component
<div className="scrollable-container">
  <NextStepViewport viewportId="scrollable-viewport">
    <div id="target-element">
      This element will be targeted by the tour step
    </div>
    {/* Other content */}
  </NextStepViewport>
</div>

Then, in your step configuration, specify the viewportID property:

// In your steps.tsx file
{
  tour: 'myTour',
  steps: [
    {
      icon: <>👋</>,
      title: 'Custom Viewport Example',
      content: <>This step is positioned relative to a custom viewport</>,
      selector: '#target-element',
      side: 'bottom',
      showControls: true,
      showSkip: true,
      // Specify the NextStepViewport ID
      viewportID: 'scrollable-viewport',
    },
  ],
}

How It Works

When you use NextStepViewport, NextStep will:

1. Position the tour step relative to the specified viewport instead of the document body
2. Automatically scroll the viewport to ensure the target element is visible when the step is shown
3. Handle edge cases like when the target element is partially visible or when the viewport is resized

Example Use Cases

<div className="table-container">
  <NextStepViewport viewportId="table-viewport">
    <table>
      {/* Table content */}
      <tr>
        <td id="target-cell">Target Cell</td>
      </tr>
    </table>
  </NextStepViewport>
</div>

<div className="form-section">
  <NextStepViewport viewportId="form-viewport">
    <form>
      <input id="username-field" />
      <input id="password-field" />
    </form>
  </NextStepViewport>
</div>

<div className="dashboard-panel">
  <NextStepViewport viewportId="panel-viewport">
    <div id="chart-element">Chart</div>
    <div id="stats-element">Statistics</div>
  </NextStepViewport>
</div>

<div className="code-editor">
  <NextStepViewport viewportId="editor-viewport">
    <pre>
      <code>
        <span id="line-42">// This line will be highlighted</span>
      </code>
    </pre>
  </NextStepViewport>
</div>

Live Demo

To see NextStepViewport in action, check out our interactive demo page. The demo includes examples of:

• Default viewport behavior (without NextStepViewport)
• Custom viewport with vertical scrolling
• Custom viewport with both horizontal and vertical scrolling