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!