React Component Cursor

Professional mouse cursor enhancement

Professional Mouse Cursor Enhancement

for React Applications

Production-ready • SSR Compatible • Performance Optimized • Design-First

TypeScriptZero Dependencies<10KBEnterprise Ready
Current: Glow Effect•Move around to see different cursors

Get Started in Minutes

Simple installation, intuitive API, and comprehensive TypeScript support.

Installation

npm install @yhattav/react-component-cursor

✅ Zero dependencies • Works with React 16.8+

✅ TypeScript ready • SSR compatible

Basic Usage

import { CustomCursor } from '@yhattav/react-component-cursor';

function App() {
  return (
    <CustomCursor>
      {/* Run wild! Any React component works */}
    </CustomCursor>

    <main>
      <h1>Welcome to my app!</h1>
    </main>
  );
}

✅ Use any React component

Interactive Playground

Experiment with cursor properties in real-time and generate ready-to-use code for your project.

/* CSS: Hide native cursor on all elements */
.hide-cursor, .hide-cursor * {
  cursor: none !important;
}

<div className="hide-cursor">
  <CustomCursor
    enabled={true}
    smoothness={1}
    offset={{ x: 0, y: 0 }}
    centered={true}
    throttleMs={0}
    zIndex={9999}  
    showDevIndicator={true}
    containerRef={containerRef}
  >
    {/* Your cursor content */}
  </CustomCursor>
  
  {/* Your app content */}
</div>

Interactive Examples

Explore real-time cursor designs. More examples coming soon.

Organic Cloud Cursor
Click Counter
Warp Cursor