1.1.0 • Published 6 months ago

circledot-cursor v1.1.0

Weekly downloads
-
License
MIT
Repository
-
Last release
6 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

6 months ago

1.0.9

6 months ago

1.0.8

6 months ago

1.0.7

6 months ago

1.0.6

6 months ago

1.0.5

6 months ago

1.0.4

6 months ago

1.0.3

6 months ago

1.0.2

6 months ago

1.0.1

6 months ago

1.0.0

6 months ago