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

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

Cheers!