react-svg-cursor

react-svg-cursor

Use any image or SVG as a cursor in your react project.

Installation

npm install --save react-svg-cursor

Usage

import { CustomCursor } from "react-svg-cursor";

import svg from "./assets/test.svg";
// or
import png from "./assets/test.png";

ReactDOM.render(
  <>
    <App />
    <CustomCursor
      component={svg}
      isDisabled={false}
      width={20}
      height={20}
      zIndex={420}
      transform="translate(-30%, -10%) rotateZ(-22deg)"
    />
  </>,
  document.getElementById("root")
);

Props

name	type	default	description
component	any	none	Your asset to be used as cursor
isDisabled	boolean	false	Turn on or off your custom cursor
width	number	18	Width
height	string	18	Height
zIndex	number	999	z-index, adjust for your app
transform	string	"none"	You can use this to rotate your cursor, works exactly like css rule

Custom styles

You can add your styles on .rsc-cursor class name

Licence

MIT-licensed. See LICENSE.