Magicmouse.ts NPM

magicmouse.ts

npm license npm downloads

A customizable magic mouse cursor component for React, built with TypeScript and styled-components. Perfect for adding an interactive and dynamic cursor effect to your modern React, Next.js, or Vite projects.

Features

Customizable Cursor Color: Easily change the cursor color via a prop.
Toggle Cursor Effect: Enable or disable the cursor effect with a simple prop.
Styled Components: Fully styled with styled-components, making it easy to customize.

Installation

To install the magicmouse.ts library, use npm:

npm install magicmouse.ts

Usage

Here's how you can use the MagicMouse component in your React project:

import React from 'react';
import { MagicMouse } from 'magicmouse.ts';

const App: React.FC = () => {
  return (
    <MagicMouse color="#00f" MagicMouseOff={false}>
      <div className="App">
        <h1>Custom Magic Mouse</h1>
        <button>Hover me</button>
        <a href="#">Hover over this link</a>
      </div>
    </MagicMouse>
  );
};

export default App;

Props

Prop Name	Type	Default Value	Description
`color`	`string`	`#ff451b`	Sets the color of the custom cursor.
`MagicMouseOff`	`boolean`	`true`	Toggles the custom cursor effect on (`true`) or off (`false`).