https://github.com/idanen/react-draggable

A custom hook to make elements draggable
https://github.com/idanen/react-draggable

custom-hook draggable react

Last synced: over 1 year ago
JSON representation

A custom hook to make elements draggable

• Host: GitHub
• URL: https://github.com/idanen/react-draggable
• Owner: idanen
• License: mit
• Created: 2019-09-05T18:50:42.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-05-04T20:55:39.000Z (about 3 years ago)
• Last Synced: 2025-03-18T10:38:00.414Z (over 1 year ago)
• Topics: custom-hook, draggable, react
• Language: JavaScript
• Size: 1.26 MB
• Stars: 12
• Watchers: 1
• Forks: 6
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-draggable

[![Travis (.org)](https://img.shields.io/travis/idanen/react-draggable)](https://travis-ci.org/idanen/react-draggable)

[![npm](https://img.shields.io/npm/v/use-draggable)](https://www.npmjs.com/package/use-draggable?activeTab=versions)

[![npm](https://img.shields.io/npm/dm/use-draggable)](https://www.npmjs.com/package/use-draggable)

[![GitHub](https://img.shields.io/github/license/idanen/react-draggable)](https://github.com/idanen/react-draggable/blob/master/LICENSE)

A custom hook to make elements draggable.

## Usage

### Simplest usage:

```javascript

import { useDraggable } from 'use-draggable';

function MyComponent(props) {

  const { targetRef } = useDraggable({ controlStyle: true });

  return (

    


      
You can drag me :)

    

  );

}

```


### Usage in a class component:

```javascript

import React from 'react';

import { Draggable } from 'use-draggable';

class MyComponent extends React.Component {

  render() {

    return (

      

        {({ targetRef, handleRef }) => (

          


            
You can drag me :)

            with this handle

          

        )}

      

    );

  }

}

```


## Live demo

https://codesandbox.io/s/use-draggable-demo-tiu3w

## Contribute

PRs are welcomed!

Note - when opening a PR, make sure the last commit message abides [commitizen guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines).