@emmanuel-saleem/moving-button

React component for validation - button moves away from your mouse when validation is invalid! 😂

Install:

npm install @emmanuel-saleem/moving-button

Usage

The button will move full page on hover when validation is invalid (isValid={false}). Once validation is fixed (isValid={true}), the button will stop moving.

import { MovingButton } from "@emmanuel-saleem/moving-button";

// Button moves when validation is invalid
<MovingButton isValid={false}>
    <button>Submit</button>
</MovingButton>

// Button doesn't move when validation is valid
<MovingButton isValid={true}>
    <button>Submit</button>
</MovingButton>

Props

• isValid (boolean, default: true): When false, the button will move away from the cursor on hover. When true, the button stays in place.
• detectRadius (number, default: 100): The distance in pixels from the button center that triggers movement.
• children (ReactNode): Custom button element. If not provided, a default styled button will be used.

Default Button

<MovingButton isValid={false} />

Testing

To test the package locally, use the included demo application:

# Navigate to demo directory
cd demo

# Install dependencies
npm install

# Run the development server
npm run dev

Open your browser to the URL shown (usually http://localhost:5173). The demo includes a form validation example where:

• Invalid State: The button moves away from your mouse when validation fails
• Valid State: The button stays in place when validation passes

See demo/README.md for more details.