react-cursors

    1.2.1 • Public • Published

    react' (1) 1

    React Cursors

    Collection of highly customizable cursors for react!

    Currently we have a few cursors ready for you to use, you may also customize them to your liking and contribute to this repo

    Installation

    npm i react-cursors
    

    Usage

    Import the component

    import { CircleCursor } from 'react-cursors'

    Use it

    <CircleCursor 
            safeBoundaryX="1000"
            safeBoundaryY="700"
            initial={{
                    dotSize:"2rem",
                    circleSize:"5rem",
                    borderStyle:"dotted",
                    color:"white",
                    borderWidth:"3px",
                    circleDay:"0.1s",
                    dotDelay:"0.05s"
            }}
    
            hover={{
                    dotSize:"0rem",
                    circleSize:"10rem",
                    borderStyle:"dotted",
                    color:"white",
                    borderWidth:"3px",
                    circleDay:"0.1s",
                    dotDelay:"0.05s"
            }}
    />

    Props provided in the initial will be the initial styles of the cursor, and the props provided in the hover will be the styles of cursor when the cursor hovers over an element with class 'hover-detect'.


    If you want to use default styling, or no hover elements then you will have to keep the component as :

    <CircleCursor initial={{}} hover={{}} />

    Further, it is always recommeded to use lazy loading while importing the component, to avoid any DOM related problems.

    Problems faced without lazy loading can lead to bugs like, hover styles not getting activated when cursors hovers over elements having class 'hover-detect'

    
    import React, { Suspense } from "react"; // we also need to import suspense
    
    const CircleCursor = React.lazy(() => import('react-cursors').then(module => ({ default: module.CircleCursor }))) ;
    
    

    And using it like :

         <div> 
              <Components />
              <Suspense fallback={<div>Loading ... </div>}>
                <CircleCursor initial={{circleSize:'30px',dotSize:'6px',color:'white'}} hover={{circleSize:'50px',dotSize:'0px',color:'white'}}/>
              </Suspense> 
          </div>

    Element attributes

    All the attributes are optional, incase values are not provided, the default values will be used



    Common for all


    Attribute Values Description
    safeBoundaryX string Used to set the boundary of the cursor along the x-axis, helpful inorder to prevent overflow
    safeBoundaryY string Used to set the boundary of the cursor along the y-axis, helpful inorder to prevent overflow



    Circle Cursor


    Attribute Values Description
    dotSize string Used to set the size of the inner dot
    circleSize string Used to set the size of the outer circle
    borderStyle string Used to set the border style of the outer circle
    color string Used to set the color of the outer circle and inner dot
    borderWidth string Used to set the border width of the outer circle
    circleDelay string Used to set the delay of the outer circle
    dotDelay string Used to set the delay of the inner circle



    Emoji Cursor


    Attribute Values Description
    size string Used to set the size of the emoji
    delay string Used to set the delay of the emoji
    emoji string Used to set the emoji



    Image Cursor

    Experimental


    Attribute Values Description
    width string Used to set the width of the image
    height string Used to set the height of the image
    delay string Used to set the delay of the image
    url string Url of the image

    Join our Community and feel free to drop your questions on

    Discord


    Project Maintainers 🛠


    Devraj Chatribin

    💻

    Shridhar Kamat

    💻

    Install

    npm i react-cursors

    DownloadsWeekly Downloads

    5

    Version

    1.2.1

    License

    none

    Unpacked Size

    19.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • shridharkamat
    • devrajchatribin