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

---

Project Maintainers 🛠

Devraj Chatribin 💻

Shridhar Kamat 💻