✨ react-diy-cursor

react-diy-cursor is a customizable React library that lets you create and apply unique, dynamic cursor designs to your web applications. Elevate your UI with interactive and visually appealing cursors!

🚀 Main Features

• 🚫 Disabling Cursor on Window Exit

  • Automatically hide the cursor (the mouse component) when it leaves the browser window.

• 🎡 Custom Cursor with Rotation and Scaling

  • Rotation: Rotate the cursor based on its movement direction.
  • Scaling: Adjust cursor size depending on the speed of movement.
  • Customization: Enable or disable rotation and scaling through settings.

• 📱 Mobile Device Detection and Interaction Disabling

  • User Agent Detection: Detect mobile devices and disable custom cursor features.
  • Fallback: Revert to default cursor behavior or a touch-friendly alternative on mobile devices.

• 🖱️ Mouse Movement and Speed Tracking Hooks

  • Movement Direction: Get hooks to track the direction of cursor movement.
  • Speed Tracking: Monitor and return the cursor's movement speed.
  • Position Tracking: Optionally track and return the cursor’s current position.

• ✨ Custom Cursors with Hover Effects and more

  • Text Hover Effect: Change the cursor or display additional effects (like text) when hovering over specific elements.
  • Cursor Follow Effect: Implement elements that follow the cursor with trailing effects or delays.

---

📚 User Guide to Setup

Installation and Setup

Local Installation

To use the React-DIY-Cursor package in your project, follow the steps below:

1. Download the Source Code

   • First, clone or download the source code of the React-DIY-Cursor package to your local machine.

2. Open the Project in a Terminal

   • Navigate to the react-diy-cursor folder in your terminal

3. Build the Package

   • In your code editor, open the terminal and compile the package by running the build script. This will create the necessary files in the dist or lib folder, depending on the package setup.

     npm run build

npm Installation

Coming Soon

---

📚 User Guide to integrate in your project

• Detailed instructions on how to integrate and customize react-diy-cursor in your projects.

Steps to Integrate react-diy-cursor

1. Open Your Project

   • Open the project where you want to use the DIY cursor in your code editor.

2. Install the Package

   • Open the terminal in your code editor and run the following command to install the local package and it will update the dependencies in both package.json and package-lock.json.

   npm install ../react-diy-cursor

   Note: The path should be relative to the location of your current project.

3. Import the Package in Your Project Here's an example of how to use the CustomCursor component in your React application:

   import React, { useState } from 'react';
   import CustomCursor from './path-to-your-cloned-repo';
   
   const App = () => {
   
     const customStyles = {
       backgroundColor: 'yellow',
       borderRadius: '50%',
       width: '20px',
       height: '20px',
     };
   
     return (
       <div>
         <CustomCursor customStyles={customStyles}>
           <span>Custom Cursor Content</span>
         </CustomCursor>
       </div>
     );
   };
   
   export default App;