React Magic Cursor

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

Live Demo

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!

Package detail