React Cursors - Collection of highly customizable cursors for react!

Overview

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-cursors').then(module => ({ default: module.CircleCursor }))) ; ">

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

💻
Issues
Owner
Shridhar Kamat
Front-end web dev
Shridhar Kamat
React ESI: Blazing-fast Server-Side Rendering for React and Next.js

React ESI: Blazing-fast Server-Side Rendering for React and Next.js React ESI is a super powerful cache library for vanilla React and Next.js applicat

Kévin Dunglas 592 Nov 24, 2021
30 Days of React challenge is a step by step guide to learn React in 30 days

30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take up to 100 days, follow your own pace.

Asabeneh 8.6k Nov 28, 2021
React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches and UI elements which may overlap the app content.

React Navigation for React js that tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content.

MohammadAli Karimi 11 Nov 18, 2021
React People lists and connects React developers around the world.

React People React People lists and connects React developers around the world. Progress View the Project page for details on what's planned and what'

Vitor Leonel 14 Aug 21, 2020
React Backbone Binding that works with React 16

WithBackbone React Higher Order Component which will bind Backbone Data that works with React Fiber (v.16) Why did we make it There are already a coup

Beanworks 2 Mar 19, 2021
A description of React's new core algorithm, React Fiber

React Fiber Architecture Introduction React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of

Andrew Clark 9.1k Dec 1, 2021
React Clone - How React Works: An In-Depth Guide

Как работает React: подробное руководство Привет, друзья! В этой статье я покажу вам, с чего начинается React. Что это означает? Это означает, что мы

Igor Agapov 5 Nov 25, 2021
A drum machine built with React using the Create React App toolchain.

drum-machine A simple drum machine built with React using the Create React App toolchain. Getting Started Clone or download the repository. Open a com

Ryan Schafer 1 Nov 25, 2021
User-friendly query builder for React

react-awesome-query-builder User-friendly React component to build queries. Inspired by jQuery QueryBuilder Using awesome Ant Design v4 for widgets No

Denis Oblogin 1k Dec 2, 2021
React component to blur image backgrounds using canvas.

React Blur React component for creating blurred backgrounds using canvas. Live demo Installation npm install react-blur --save Usage var Blur = requir

Javier Bórquez 427 Nov 26, 2021
📑 A React component to easily create demos of other components

React DemoTab ?? A React component to easily create demos of other components Install npm install react-demo-tab Demo DemoTab example Example import R

mkosir 24 Nov 9, 2021
A React component to view a PDF document

React PDF viewer A React component to view a PDF document. It's written in TypeScript, and powered by React hooks completely. // Core viewer import {

React PDF Viewer 693 Nov 23, 2021
React file input component for complete control over styling and abstraction from file reading.

react-file-reader-input React file input component for complete control over styling and abstraction from file reading. <FileReaderInput as={dataForma

Kevin Ngo 110 Aug 24, 2021
The react UI component for building complex filter criteria

React Filter Control The React component for building the composite filter criteria Demo (JS) | Demo (TS) Together With Data Table Overview Installati

Alexander Komarov 29 Jul 24, 2021
React JSON Viewer Component, Extracted from redux-devtools

This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull requests. react-json-tre

Alexander Kuznetsov 988 Nov 22, 2021
🖱 A resizable and draggable component for React.

A resizable and draggable component for React. Table of Contents Screenshot Live Demo Storybook CodeSandbox Install Usage Props Instance API updateSiz

bokuweb 2.5k Dec 2, 2021
📏 A resizable component for React.

?? A resizable component for React. Table of Contents Screenshot Live Demo Storybook CodeSandbox Install Usage Props Instance API updateSize(size: { w

bokuweb 1.6k Nov 30, 2021
React split-pane component

React Split Pane Split-Pane React component, can be nested or split vertically or horizontally! Installing npm install react-split-pane # or if you u

tomkp 2.6k Nov 26, 2021
A simple React component to reproduce the way iOS deletes an item in a list

react-swipe-to-delete-ios A simple React component to reproduce the way iOS deletes an item in a list. Demo Installation yarn add react-swipe-to-delet

Arnaud Ambroselli 26 Nov 14, 2021