cursor-magic
v0.6.1
Published
Cursor Magic is cursor effects library, a simple and easy-to-use. This library is available in vanillaJS and React.
Downloads
47
Maintainers
Readme
Cursor Magic
Cursor Magic is cursor effects library, a simple and easy-to-use.
This library is available in vanillaJS and React.
Demo
Cursor Pointer
Installation
- Including dist/cursor-magic.js from latest tag to your project. Here tags.
- Using npm:
npm install cursor-magic
Usage
Simple way
<script type="module">
import { createCursorMagic } from "path/to/cursor-magic/dist/cursor-magic.js";
createCursorMagic();
</script>
Customize pointer
<script type="module">
import { createCursorMagic } from "./node_modules/cursor-magic/dist/cursor-magic.js";
createCursorMagic({
cursorSize: 50, // pointer size
// ↓ customize pointer style
cursorStyle: {
backgroundColor: "#bbff00e3", // background color
border: "solid 2px #000000", // adding border style
},
});
</script>
Customized pointer screenshot
For React
Firstly, you need to install using npm. npm i cursor-magic
Secondary, you need to import cursor-magic/react
package, not cursor-magic
.
Example
'use client' // ← Add if necessary.
import CursorMagic from 'cursor-magic/react'
const CursorMagicClient = () => {
return <CursorMagic />
}
export default CursorMagicClient
If you try to customize styling, the following can be set in the component props.
'use client'
import CursorMagic from 'cursor-magic/react'
const CursorMagicClient = () => {
return <CursorMagic
cursorSize={50}, // pointer size
// ↓ customize pointer style
cursorStyle={{
backgroundColor: "#bbff00e3", // background color
border: "solid 2px #000000", // adding border style
}},
/>
}
export default CursorMagicClient
Issues
We have obviously not tested this on every website. If you run into an issue, or find a way the automatic detection could be better, please create an Issue. If you can include a test case, that's even better.