Button Follow Cursor - React Component Library

Button Follow Cursor is a handy React component that creates an interactive button responding to cursor movement. It enhances user experience and adds dynamic elements to your interface.

Installation

To use the component in your project, follow these steps:

1. Install the required dependencies:

   npm install clsx

2. Install the library:

   npm install button-follow-cursor

3. Copy the ButtonFollowCursor component into your project or install the library if it’s published (e.g., via npm or GitHub).

Usage

Basic Example:

import { ButtonFollowCursor } from "button-follow-cursor";

function App() {
  return (
    <div className="h-screen w-full grid place-items-center">
      <ButtonFollowCursor
        coordsOn={true}
        activeScale={true}
        className="max-w-sm cursor-pointer rounded h-11 w-full"
        background="bg-blue-500"
        foreground="bg-black border-4"
        initialCoordinates={{ x: -30, y: -30 }}
      >
        Button
      </ButtonFollowCursor>
    </div>
  );
}

export default App;

Component Props

Prop	Type	Description	Default Value
children	ReactNode	Text or elements displayed inside the button.	undefined
coordsOn	boolean	Enables cursor tracking.	false
type	"button" | "submit" | "reset"	Button's HTML type.	"button"
onClick	() => void	Callback triggered when the button is clicked.	undefined
activeScale	boolean	Enables a scaling effect when the button is clicked.	false
className	string	Additional CSS classes for the button container.	""
background	string	CSS class for the button container's background.	"bg-default"
foreground	string	CSS class for the button's text and foreground.	"text-black"
initialCoordinates	{ x: number; y: number }	Initial offset coordinates for the button.	{ x: 0, y: 0 }

Key Features

1. Dynamic Cursor Interaction: The button moves based on the user’s cursor position.
2. Scaling Effect: Adds a scaling effect when the button is clicked.
3. Simple Configuration: Easily customizable properties for appearance and behavior.

Customization Example

<ButtonFollowCursor
  coordsOn={true}
  activeScale={true}
  className="max-w-xs cursor-pointer rounded-lg h-12"
  background="bg-gradient-to-r from-purple-500 to-blue-500"
  foreground="text-white border-2 border-white"
  initialCoordinates={{ x: 50, y: 50 }}
  onClick={() => console.log("Button clicked!")}
>
  Custom Button
</ButtonFollowCursor>

Styling Tips

• Use TailwindCSS classes or your own CSS for customization.
• Add animations to enhance the user effect.
• Adjust initialCoordinates to create interesting effects.

CSS for Active Scaling (active-scale)

.active-scale:active {
  transform: scale(0.95);
}

Conclusion

ButtonFollowCursor is an excellent choice for creating interactive buttons with advanced UX. It integrates easily into projects, offers extensive customization options, and adds style to your interface.