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.