✨ react-intent-z

A React library for detecting user intent instead of just reacting to renders.
Optimize UX and performance by understanding what the user is likely to do next.

🚀 What is User Intent?

User intent answers questions like:

• Don’t optimize components. Optimize intent
• Is the user about to interact with this component?
• Is this content visible or relevant right now?
• Is the user idle, scrolling, hovering, or focused?
• Should we delay work, prefetch data, or upgrade UI quality?

Unlike memoization libraries, react-intent-z focuses on UX-driven optimization.

📦 Installation

npm install react-intent-z
# or
yarn add react-intent-z

🧠 Core Concepts

Intent signals

• visible – element is visible on screen

• hover – user is hovering

• scrolling – active scrolling

• idle – user is inactive

• focused – window/tab focus

• interactionLevel – LOW / MEDIUM / HIGH

All signals are combined into a single intent model.

🧩 Setup

import { UserIntentProvider } from 'react-intent-z';

export function App() {
  return (
    <UserIntentProvider debug>
      <Main />
    </UserIntentProvider>
  );
}

🎯 useUserIntent

import { useUserIntent } from 'react-intent-z';

function ProductCard() {
  const intent = useUserIntent();

  if (!intent.visible) {
    return <Skeleton />;
  }

  return (
    <div>
      {intent.hover && <PreviewVideo />}
      {intent.interactionLevel === 'HIGH' && <HighQualityImage />}
    </div>
  );
}

Returned intent object

type UserIntent = {
  visible: boolean;
  hover: boolean;
  scrolling: boolean;
  idle: boolean;
  focused: boolean;
  interactionLevel: 'LOW' | 'MEDIUM' | 'HIGH';
};

🪄 Intent-based UX examples

Lazy upgrade UI

if (intent.visible && intent.hover) {
  loadExpensiveUI();
}

Defer work when user is idle

if (intent.idle) {
  startBackgroundSync();
}

Prefetch on intent

if (intent.interactionLevel === 'MEDIUM') {
  prefetchProduct();
}

🐞 Debug Overlay

import { IntentDebugOverlay } from 'react-intent-z';

<UserIntentProvider debug>
  <App />
  <IntentDebugOverlay />
</UserIntentProvider>

🆚 Compared to memoization

| Memoization | User Intent | | ----------------- | ------------ | | Optimizes renders | Optimizes UX | | Reactive | Predictive | | Component-focused | User-focused | | Technical | Behavioral |

📜 License

MIT