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

| Prop | Type | Default | Description | | -------------------- | ------ | ------- | ------------------------------------------------------------------------- | | threshold | number | 200 | Distance in pixels that triggers prefetching when mouse approaches a link | | predictionInterval | number | 100 | Interval in milliseconds to check for nearby links |

Credits

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

License

MIT