React Cursor Cat

A simple React component that adds the classic oneko.js cat to your website. The cat will chase your mouse cursor around the screen, bringing nostalgic fun to your React projects.

Live Demo

This component is a React-friendly wrapper for the original oneko.js vanilla JavaScript code, using useEffect for proper mounting and cleanup. It's lightweight, dependency-free, and brings a fun, nostalgic touch to any React project.

✨ Features

• 🎯 Easy to Use — Just one line of code to get it running
• ⚛️ React-Friendly — Safely implemented using the useEffect hook
• 🧹 Safe Cleanup — Automatically removes the cat and event listeners on unmount
• 📦 Zero Dependencies — Runs entirely on its own
• 🎨 Customizable — Pass in any CSS filter to change the cat's color or appearance
• 🪶 Lightweight — Minimal bundle size impact

📦 Installation

Install the package using npm or yarn:

npm install react-cursor-cat

or

yarn add react-cursor-cat

🚀 Quick Start

Import the component into your React app and use it anywhere:

That's it! The cat will now follow your mouse cursor across the screen.

import Oneko from 'react-cursor-cat';

function App() {
  return (
    <div>
      {/* Default cat */}
      <Oneko />
    </div>
  );
}

🛠️ How It Works

The component uses React's useEffect hook to:

1. Create the cat sprite element on component mount
2. Add mouse movement event listeners
3. Update the cat's position and animation based on cursor movement
4. Clean up the sprite and event listeners on component unmount

This ensures proper integration with React's lifecycle and prevents memory leaks.

📖 Examples

Basic Usage

import Oneko from "react-cursor-cat";

function App() {
  return (
    <>
      <Oneko />
      <h1>
        A simple React component that adds the classic oneko.js cat to your
        website. The cat will chase your mouse cursor around the screen.
      </h1>
    </>
  );
}

export default App;

🌐 Browser Compatibility

Works in all modern browsers that support:

• React 16.8+ (Hooks)

🤝 Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue on GitHub.

📝 License

MIT © [Habibullah Md Asif]

⭐ Show Your Support

If you like this project, please consider giving it a ⭐️ on GitHub!