1.1.0 • Published 10 months ago

circledot-cursor v1.1.0

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

HoverMorph

React Adaptive Circledot-Cursor 🎯

A sleek, responsive, and customizable cursor component for React applications. This library provides an animated cursor that adapts to different interactive elements, creating an engaging user experience.

Demo

✨ Features

  • 🎨 Smooth cursor animations
  • 🔄 Adapts to different element shapes
  • 🎯 Interactive hover effects
  • 📱 Responsive design
  • ⚡ Lightweight and performant
  • 🛠️ Easy to customize

🚀 Installation

npm install circledot-cursor
# or
yarn add circledot-cursor

📖 Usage

  1. Import the component:
import CustomCursor from "circledot-cursor";
  1. Add it to your app:
function App() {
  return (
    <>
      <CustomCursor />
      {/* Your app content */}
    </>
  );
}
  1. Add the class social-button to any circular elements you want the cursor to adapt to:
<button className="social-button">Click me!</button>

🎨 Customization

You can customize the cursor by overriding the CSS variables:

:root {
  --cursor-dot-size: 5px;
  --cursor-dot-color: yellow;
  --cursor-circle-size: 30px;
  --cursor-circle-border: 2px solid rgb(90, 90, 1);
}

📝 Props

PropTypeDefaultDescription
dotSizenumber5Size of the cursor dot
circleSizenumber30Size of the cursor circle
dotColorstring'yellow'Color of the cursor dot
borderColorstring'rgb(90, 90, 1)'Color of the circle border

🌟 Examples

Basic Usage

import CustomCursor from "react-adaptive-cursor";

function App() {
  return (
    <div>
      <CustomCursor />
      <button>Normal Button</button>
      <a href="#" className="social-button">
        Social Link
      </a>
    </div>
  );
}

Custom Styling

<CustomCursor
  dotSize={8}
  circleSize={40}
  dotColor="#ff0000"
  borderColor="#000000"
/>

🛠️ Development

  1. Clone the repository
git clone https://github.com/yourusername/circledot-cursor.git
  1. Install dependencies
npm install
  1. Start development
npm run dev

📄 License

MIT © Tejas Gaikwad

🤝 Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

🙌 Support

Give a ⭐️ if this project helped you!

📞 Contact

1.1.0

10 months ago

1.0.9

10 months ago

1.0.8

10 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago