React-magic-cursor NPM

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>
    </>
  );
};