Initialize the Manager

Optional Step

This step is not needed if you don't want to configure ForesightJS. The integration initializes the manager automatically with default settings on page load.

If you don't want to configure anything, skip to Quick Start.

In Astro you don't call ForesightManager.initialize() yourself. The integration does it in the script it injects into every page. To customize global behavior, pass the same settings object through the manager option:

// astro.config.mjs
import { defineConfig } from "astro/config"
import foresight from "@foresightjs/astro"

export default defineConfig({
  integrations: [
    foresight({
      manager: {
        defaultHitSlop: 20,
        touchDeviceStrategy: "viewport",
      },
    }),
  ],
})

Optional Settings

manager accepts any of these global settings.

ForesightManager.initialize({
  // Mouse prediction settings
  enableMousePrediction: true, // Enable/disable mouse trajectory prediction
  trajectoryPredictionTime: 120, // How far ahead to predict (10-200ms)
  positionHistorySize: 8, // Mouse positions to track (2-30)

  // Keyboard prediction settings
  enableTabPrediction: true, // Enable/disable keyboard navigation prediction
  tabOffset: 2, // Tab stops ahead to trigger (0-20)

  // Scroll prediction settings
  enableScrollPrediction: true, // Enable/disable scroll prediction
  scrollMargin: 150, // Pixel distance for scroll detection (30-300)

  // Touch device settings
  touchDeviceStrategy: "viewport", // "none", "viewport", or "onTouchStart"

  // Connection settings
  minimumConnectionType: "3g", // "slow-2g", "2g", "3g", "4g"

  // Default element settings
  defaultHitSlop: 0, // Default hit slop for all elements (number or {top, right, bottom, left})
})

Good to know

The ForesightManager is a singleton, meaning it can only be initialized once. If you call ForesightManager.initialize() multiple times, only the first call will take effect. Any subsequent calls will simply return the already initialized instance.

The manager also provides several static methods you can use to inspect registered elements, callback counts, and event listeners. You can find a list of these methods here.