useProximity

A clever, modern React hook that tracks how close the mouse or finger is to an element — like a “proximity sensor” for UI. Perfect for magnetic buttons, hover-to-fade, pre-hover effects, and more. Make your interfaces feel alive and interactive!

Features

• Tracks mouse and touch proximity to any element
• Returns a normalized value (0 = far, 1 = directly over)
• Easy to use with any React component
• Great for magnetic buttons, hover previews, and creative UI effects
• Lightweight, zero dependencies (except React)

Installation

npm install use-proximity
# or
yarn add use-proximity

Usage

import { useProximity } from 'use-proximity';

function MagneticButton() {
  const [ref, proximity] = useProximity();

  return (
    <button
      ref={ref}
      style={{
        transform: `scale(${1 + proximity * 0.1})`,
        boxShadow: proximity > 0.5 ? '0 4px 20px rgba(0,0,0,0.2)' : 'none',
        transition: 'transform 0.2s, box-shadow 0.2s',
      }}
    >
      Magnetic Button
    </button>
  );
}

API

const [ref, proximity] = useProximity(maxDistance?)

• maxDistance (optional): Maximum distance in pixels to track proximity (default: 200)
• ref: Attach to your target element
• proximity: Number between 0 (far) and 1 (directly over the element)

Publishing

1. Build the package:

   npx tsc

2. Login to npm:

   npm login

3. Publish:

   npm publish --access public

Marketing Tips

• Share your hook on Twitter/X, Reddit, and Hacker News
• Post a demo on CodeSandbox or StackBlitz
• Write a blog post or tutorial
• Submit to React Hooks Library and npm trends
• Create a GIF/video demo for social media

License

MIT

Made by Ayaan Khan