js.foresight
Version:
Predicts where users will click based on mouse movement, keyboard navigation, and scroll behavior. Includes touch device support. Triggers callbacks before interactions happen to enable prefetching and faster UI responses. Works with any framework.
96 lines (63 loc) • 5.32 kB
Markdown
# [ForesightJS](https://foresightjs.com/)
[](https://www.npmjs.com/package/js.foresight)
[](https://www.npmjs.com/package/js.foresight)
[](https://bundlephobia.com/package/js.foresight)
[](https://github.com/spaansba/ForesightJS/commits)
[](https://github.com/spaansba/ForesightJS)
[](https://bestofjs.org/projects/foresightjs)
[](http://www.typescriptlang.org/)
[](https://opensource.org/licenses/MIT)
[](https://foresightjs.com#playground)
ForesightJS is a lightweight JavaScript library that predicts user intent to prefetch content before it's needed. **It works completely out of the box without configuration**, supporting both desktop and mobile devices with different prediction strategies.
### [Playground](https://foresightjs.com/)
_In the GIF above, the [ForesightJS DevTools](https://foresightjs.com/docs/debugging/devtools) are enabled. Normally, users won't see anything that ForesightJS does except the increased perceived speed from early prefetching._
## Download
```bash
pnpm add js.foresight
# or
npm install js.foresight
# or
yarn add js.foresight
```
## Basic Usage Example
This basic example is in vanilla JS, ofcourse most people will use ForesightJS with a framework. You can read about framework integrations in the [docs](https://foresightjs.com/docs/integrations/react/useForesight).
```javascript
import { ForesightManager } from "foresightjs"
// Initialize the manager if you want custom global settings (do this once at app startup)
ForesightManager.initialize({
// Optional props (see configuration)
})
// Register an element to be tracked
const myButton = document.getElementById("my-button")
ForesightManager.instance.register({
element: myButton,
callback: () => {
// This is where your prefetching logic goes
},
hitSlop: 20, // Optional: "hit slop" in pixels.
// other optional props (see configuration)
})
```
## Integrations
Since ForesightJS is framework agnostic, it can be integrated with any JavaScript framework. While I haven't yet built integrations for every framework, ready-to-use implementations for [Next.js](https://foresightjs.com/docs/integrations/react/nextjs) and [React Router](https://foresightjs.com/docs/integrations/react/react-router) are already available. Sharing integrations for other frameworks/packages is highly appreciated!
## Configuration
ForesightJS works out of the box with no setup required, but it can be configured both [globally](https://foresightjs.com/docs/configuration/global-settings) and per [element](https://foresightjs.com/docs/configuration/element-settings) if needed.
## Development Tools
ForesightJS has dedicated [Development Tools](https://github.com/spaansba/ForesightJS/tree/main/packages/js.foresight-devtools) created with [Foresight Events](https://foresightjs.com/docs/events) that help you understand and tune how foresight is working in your application. This standalone development package provides real-time visualization of mouse trajectory predictions, element bounds, and callback execution.
```bash
pnpm add js.foresight-devtools
```
See the [development tools documentation](https://foresightjs.com/docs/debugging/devtools) for more details.
## Prediction Strategies
ForesightJS uses different prediction strategies depending on the device type:
**Desktop/Keyboard Users**: Mouse trajectory prediction, keyboard navigation tracking, and scroll-based prefetching. [Read more](https://foresightjs.com/docs/getting-started/what-is-foresightjs#keyboardmouse-users)
**Mobile Devices**: Viewport enter detection and touch start events (configurable via [`touchDeviceStrategy`]). [Read more](https://foresightjs.com/docs/getting-started/what-is-foresightjs#touch-devices-v330)
## Providing Context to AI Tools
ForesightJS is a newer library, so most AI assistants and LLMs may not have much built-in knowledge about it. To improve their responses, you can provide the following context:
- Use [llms.txt](https://foresightjs.com/llms.txt) for a concise overview of the API and usage patterns.
- Use [llms-full.txt](https://foresightjs.com/llms-full.txt) for a full markdown version of the docs, ideal for AI tools that support context injection or uploads.
- All documentation pages are also available in markdown. You can view them by adding .md to the end of any URL, for example: https://foresightjs.com/docs/getting_started.md.
[Read more](https://foresightjs.com/docs/ai-context)
# Contributing
Please see the [contributing guidelines](/CONTRIBUTING.md)