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-types is 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-fab

Usage

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