https://github.com/ajittupe2548/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.
https://github.com/ajittupe2548/react-draggable-fab
draggable draggable-button react react-component react-draggable sticky-button
Last synced: 1 day ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/ajittupe2548/react-draggable-fab
- Owner: ajittupe2548
- License: mit
- Created: 2024-09-01T18:57:35.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-07T20:35:29.000Z (over 1 year ago)
- Last Synced: 2024-09-08T21:03:49.271Z (over 1 year ago)
- Topics: draggable, draggable-button, react, react-component, react-draggable, sticky-button
- Language: JavaScript
- Homepage: https://react-draggable-fab.vercel.app/
- Size: 592 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
## Installation
To get started, install the component using npm:
```bash
npm install react-draggable-fab
```
## Usage
```js
import React from 'react';
import DraggableButton from 'react-draggable-fab';
const App = () => {
return Drag Me!;
};
```
## 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