React Magic Cursor

A cursor that follows your mouse and adapt its size, shape and color based on the hovered element.

Live Demo

See a real life example

Install

Depending on the package manager you are using for your project, use npm install or yarn add to include react-magic-cursor in your react app.

npm install --save react-magic-cursor

yarn add react-magic-cursor

Usage

Cursor

In your main location, add the MagicCursorProvider and MagicCursor

import React from 'react';
import { MagicCursor, MagicCursorProvider } from 'react-magic-cursor';

const App = () => {
  return (
    <React.StrictMode>
      <MagicCursorProvider thickness={2}>
        <div className="App">
          <MagicCursor />
          <Page />
        </div>
      </MagicCursorProvider>
    </React.StrictMode>
  );
};

Options

Prop	Type	Description	Default
thickness	number	thickness of the cursor	1

This will add the cursor that follow the mouse.

Element

In order to interact with yours elements, you need to englobe them with the <MagicElement /> component.

import { MagicElement } from 'react-magic-cursor';

const Page = () => {
  return (
    <>
      <MagicElement type="outline" color="#ff0066" offset={5}>
        <button>Click me!</button>
      </MagicElement>

      <MagicElement type="underline" color="#ff0066">
        <a href="#">Follow me!</a>
      </MagicElement>
    </>
  );
};

Options

Prop	Type	Description	Default
type	string	outline or underline	outline
offset	number	can be negative	0
color	string	hex value	#000000

Contribute

• Run the package locally

npm run dev

Visit http://localhost:5173/

• Test the package in another project

npm run build && npm run pack

Then in your project's package.json file, add (refer to the current version in `./package.json):

"react-magic-cursor": "~/react-magic-cursor-0.1.5.tgz"

If you have a feature request, please add it as an issue or make a pull request.

Cheers!