https://github.com/zamarawka/use-drags

Useful way to handle drag gestures. Covers whole drag and drop lifecycle.
https://github.com/zamarawka/use-drags

drag-and-drop javascript npm-package react reacthook

Last synced: 3 months ago
JSON representation

Useful way to handle drag gestures. Covers whole drag and drop lifecycle.

• Host: GitHub
• URL: https://github.com/zamarawka/use-drags
• Owner: zamarawka
• License: mit
• Created: 2019-11-11T01:35:13.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T00:47:10.000Z (over 3 years ago)
• Last Synced: 2025-03-07T16:41:37.573Z (over 1 year ago)
• Topics: drag-and-drop, javascript, npm-package, react, reacthook
• Language: TypeScript
• Homepage:
• Size: 2.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Ci Status](https://github.com/zamarawka/use-drags/workflows/CI/badge.svg)](https://github.com/zamarawka/use-drags/actions)

[![Npm version](https://img.shields.io/npm/v/use-drags.svg?style=flat&logo=npm)](https://www.npmjs.com/package/use-drags)

[![React version](https://img.shields.io/npm/dependency-version/use-drags/peer/react.svg?style=flat&logo=react)](https://reactjs.org/)

# use-drags

Handle drag events without overhead by only 1 callback. React hook for manage drag and drop lifecycle without extra business or view logic.

Useful as base for custom UI components with draggable elements.

[Demo](https://zamarawka.github.io/use-drags/)

Package includes its TypeScript Definitions

# Install

```sh

npm install use-drags

```

# Usage

```jsx

import React, { useRef, useState } = 'react';

import useDrags from 'use-drags';

function DraggableBlock() {

  const ref = useRef(null);

  const [position, setPosition] = useState(null);

  useDrags(ref, ({

    el,

    first,

    last,

    deltaX,

    deltaY,

    offsetX,

    offsetY,

    clientX,

    clientY,

  }) => {

    if (first) {

      el.style.opacity = 0.5;

    }

    if (last) {

      el.style.opacity = null;

      el.style.transform = null;

      setPosition(null);

      return;

    }

    setPosition({ clientX, clientY });

    el.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0)`;

  });

  return (

    


      Drag me!

      {position !== null &&

        X: {position.clientX }, Y: {position.clientY}

      }

    

  );

}

```


# Development

```sh

npm run lint # linting

npm run test # testing

```

Active maintenance with care and ❤️.

Feel free to send a PR.