1.1.0 • Published 6 months ago
circledot-cursor v1.1.0
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.
✨ 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
- Import the component:
import CustomCursor from "circledot-cursor";
- Add it to your app:
function App() {
return (
<>
<CustomCursor />
{/* Your app content */}
</>
);
}
- 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
Prop | Type | Default | Description |
---|---|---|---|
dotSize | number | 5 | Size of the cursor dot |
circleSize | number | 30 | Size of the cursor circle |
dotColor | string | 'yellow' | Color of the cursor dot |
borderColor | string | '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
- Clone the repository
git clone https://github.com/yourusername/circledot-cursor.git
- Install dependencies
npm install
- Start development
npm run dev
📄 License
MIT © Tejas Gaikwad
🤝 Contributing
- Fork it
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
🙌 Support
Give a ⭐️ if this project helped you!
📞 Contact
- GitHub: @Tejas160920