React Draggable Float Button

!License

A lightweight, customizable draggable floating button component for React.

Features

- 🎯 Fully draggable with viewport constraints
- 📱 Mobile touch support (drag on mobile devices)
- 🎨 Customizable styles via props or CSS classes
- 🖥️ Responsive and automatically repositions on window resize
- 🎪 TypeScript support with full type definitions
- 🚀 Lightweight with zero dependencies
- 💅 BEM-style CSS classes for easy customization

Installation

``bash
npm install react-draggable-float-btn
`

Quick Start

`tsx
import { FloatingButton } from "react-draggable-float-btn";

function App() {
return (
console.log("Clicked!")}>+
);
}
`

Props

| Prop | Type | Default | Description |
| ----------------- | -------------------------------------------------------------- | ---------------- | ------------------------------------------ |
| children | React.ReactNode | Required | Content to display inside the button |
| onClick | (event: MouseEvent) => void | - | Click handler |
| size | 'small' \| 'medium' \| 'large' | 'medium' | Button size (40px / 50px / 60px) |
| defaultPosition | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Default position |
| position | { x: number; y: number } | - | Fixed position (overrides defaultPosition) |
| draggable | boolean | true | Enable/disable dragging |
| disabled | boolean | false | Disable button interactions |
| backgroundColor | string | #ffffff | Background color |
| color | string | #000000 | Text/content color |
| borderRadius | number | 50 | Border radius in pixels |
| boxShadow | string | CSS default | Custom box shadow |
| zIndex | number | 1000 | Z-index value |
| className | string | - | Additional CSS class |
| style | CSSProperties | - | Inline styles |
| onDragStart | (position: { x: number; y: number }) => void | - | Callback when drag starts |
| onDragEnd | (position: { x: number; y: number }) => void | - | Callback when drag ends |

Examples

$3

`tsx
S
M
L
`

$3

`tsx
TL
BR
`

$3

`tsx
backgroundColor="#007bff"
color="#ffffff"
size="large"
onClick={() => alert("Hello!")}
>
💬

`

$3

`tsx
<>
+
💬
🔔

`

$3

`tsx

📌

`

Styling

$3

The component uses BEM-style classes:

- .btn-float-draggable - Base class
- .btn-float-draggable--{size} - Size variants (small/medium/large)
- .btn-float-draggable--dragging - Applied while dragging
- .btn-float-draggable--disabled - Applied when disabled

$3

`css
.btn-float-draggable {
background-color: #007bff !important;
box-shadow: 0 8px 16px rgba(0, 123, 255, 0.3) !important;
}

.btn-float-draggable--large {
width: 70px !important;
height: 70px !important;
}

.btn-float-draggable--dragging {
opacity: 0.8;
transform: scale(1.05);
}
`

$3

`tsx
Custom
`

The button will render with combined classes:

`html
class="btn-float-draggable btn-float-draggable--medium my-custom-button"
>
`

Advanced Usage

$3

`tsx
onDragStart={(pos) => console.log("Drag started:", pos)}
onDragEnd={(pos) => console.log("Drag ended:", pos)}
>
📍

`

$3

`tsx
style={{
background: "linear-gradient(45deg, #ff6b6b, #ff8e8e)",
border: "3px solid #ff5252",
}}
>
✨

`

Development

`bash


Install dependencies

npm install

Build package

npm run build

Watch mode

npm run dev
``

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.