react-svg-cursor
TypeScript icon, indicating that this package has built-in type declarations

2.5.0 • Public • Published

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.

Package Sidebar

Install

npm i react-svg-cursor

Weekly Downloads

129

Version

2.5.0

License

MIT

Unpacked Size

14.3 kB

Total Files

18

Last publish

Collaborators

  • cufta22