Neanderthals Programming Machines

    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.

    Install

    npm i react-svg-cursor

    DownloadsWeekly Downloads

    22

    Version

    2.5.0

    License

    MIT

    Unpacked Size

    14.3 kB

    Total Files

    18

    Last publish

    Collaborators

    • cufta22