Quick Start

This guide will walk you through registering your first element with ForesightJS in React and understanding how the prediction system works.

Basic Usage Example

In React you register an element with the useForesight hook. Give it a callback and attach the returned elementRef to the element you want to track:

import { useForesight } from "@foresightjs/react"

function PrefetchButton() {
  const { elementRef } = useForesight<HTMLButtonElement>({
    callback: () => console.log("prefetch logic here"),
  })

  return <button ref={elementRef}>Prefetch</button>
}

Thats it!

Unregistration is automatic

The hook registers the element when it mounts and unregisters it when the component unmounts, so you never have to call unregister() yourself.

Provide registration options

However if you want to add a bit more power to your element you can give it the following props:

import { useForesight } from "@foresightjs/react"

function PrefetchButton() {
  const { elementRef } = useForesight<HTMLButtonElement>({
    callback: () => console.log("prefetch logic here"),
    hitSlop: 50, // slop around the element, making its hitbox bigger
    name: "My Foresight button!", // name visible in the debug tools
    meta: {
      route: "/about",
    }, // your custom meta data for analytics
    reactivateAfter: 5 * 60 * 1000, // time for the element to reactivate after the callback has been hit
  })

  return <button ref={elementRef}>Prefetch</button>
}

See registration options for the full list. The hook also returns the element's reactive prediction state (isPredicted, isActive, …); read about it in useForesight.

Development Tools

ForesightJS has dedicated Development Tools that help you understand and tune how prediction is working in your application:

pnpm add js.foresight-devtools
# or
npm install js.foresight-devtools
# or
yarn add js.foresight-devtools

import { ForesightDevtools } from "js.foresight-devtools"

// Initialize development tools
ForesightDevtools.initialize({
  // optional props
})