0.1.1 • Published 10 months ago
react-draggable-fab v0.1.1
react-draggable-fab
A simple and customizable draggable button component for the web. Users can easily move the button around the screen, and it will snap to an edge upon release.
- Customizable: Easily configure button state, appearance to suit your needs.
- Lightweight: Minimal dependencies—only
prop-typesis required. - Responsive: Works seamlessly across different screen sizes and devices.
- Smooth Interaction: Provides a smooth dragging experience with snap-to-edge functionality.
Features
- Draggable: Move the button freely around the screen.
- Snap-to-Edge: Automatically aligns the button to an edge when released.
- Custom Styling: Apply your own styles and customize the button's look and feel.
- Touch and Mouse Support: Fully functional with both touch and mouse interactions.
Demo
Demo Link
Installation
To get started, install the component using npm:
npm install react-draggable-fabUsage
import React from 'react';
import DraggableButton from 'react-draggable-fab';
const App = () => {
return <DraggableButton>Drag Me!</DraggableButton>;
};API
| Prop | Type | Default | Description |
|---|---|---|---|
| blurDelay | number | 3000 | Delay before applying the grayed-out (blurred) button style, in milliseconds. |
| children | string | '' | Content inside the draggable button. |
| className | string | '' | Additional CSS class for the component wrapper. |
| closeButtonBottom | string | 100px | CSS bottom property value for the close button. |
| closeButtonClassName | string | '' | Additional CSS class for the close button. |
| isVisible | bool | undefined | If true, the button will be visible. |
| overlayClassName | string | '' | Additional CSS class for the overlay (background blackout). |
| stickyEdge | string | left | The edge of the screen where the button will stick (left or right). |
| verticalThreshold | number | 50 | Threshold value for vertical positioning. The component will not stick above or below this threshold. |
| xPosition | string | 0 | Horizontal position (CSS left or right) of the component relative to the window. |
| yPosition | string | 400px | Vertical position (CSS top) of the component relative to the window. |
| onClick | func | () => {} | Callback function triggered when the button is clicked. |
| onClose | func | () => {} | Callback function triggered when the draggable button is dropped onto the close button. |
License
MIT