A cursor that follows your mouse and adapt its size, shape and color based on the hovered element.
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
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>
);
};
Prop | Type | Description | Default |
---|---|---|---|
thickness |
number | thickness of the cursor | 1 |
This will add the cursor that follow the mouse.
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>
</>
);
};
Prop | Type | Description | Default |
---|---|---|---|
type |
string |
outline or underline
|
outline |
offset |
number | can be negative | 0 |
color |
string | hex value | #000000 |
- 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!