svelte-proximity-prefetch

A Svelte wrapper that automatically prefetches pages based on the user's cursor position.

Right now it is approximation-based. A voronoi-based approach is planned.

Installation

# npm
npm install svelte-proximity-prefetch

# yarn
yarn add svelte-proximity-prefetch

# pnpm
pnpm add svelte-proximity-prefetch

# bun
bun add svelte-proximity-prefetch

Usage

Basic Example

Wrap your app layout with the ProximityPrefetch component:

<script>
    import { ProximityPrefetch } from 'svelte-proximity-prefetch';
</script>

<ProximityPrefetch>
    <!-- Your app content goes here -->
    <main>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </main>
</ProximityPrefetch>

Customization

You can customize the prefetching behavior with these props:

<script>
    import { ProximityPrefetch } from 'svelte-proximity-prefetch';
</script>

<ProximityPrefetch threshold={200} predictionInterval={100}>
    <!-- Your app content -->
</ProximityPrefetch>

Props

Credits

Based on @tannerlinsley's work for TanStack Router. Implementation based on @pontusab's gist of a Next.js implementation.

License

MIT