https://github.com/bevacqua/react-dragula

:ok_hand: Drag and drop so simple it hurts
https://github.com/bevacqua/react-dragula

Last synced: about 10 hours ago
JSON representation

:ok_hand: Drag and drop so simple it hurts

• Host: GitHub
• URL: https://github.com/bevacqua/react-dragula
• Owner: bevacqua
• License: mit
• Created: 2015-08-04T18:40:21.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-09-09T17:28:40.000Z (over 4 years ago)
• Last Synced: 2024-12-06T14:04:55.269Z (7 days ago)
• Language: JavaScript
• Homepage: http://bevacqua.github.io/react-dragula
• Size: 1.15 MB
• Stars: 995
• Watchers: 18
• Forks: 77
• Open Issues: 27
• Metadata Files:
  • Readme: readme.markdown
  • Changelog: changelog.markdown
  • Contributing: contributing.markdown
  • License: license

Awesome Lists containing this project

• awesome-react-components - react-dragula - Drag and drop so simple it hurts. (UI Components / Form Components)
• awesome-react - react-dragula - Drag and drop so simple it hurts.  (UI Components / Device Input/User Action)
• awesome-list - react-dragula - Drag and drop so simple it hurts. (Demos / Form Components)
• awesome-react-components - react-dragula - Drag and drop so simple it hurts. (UI Components / Form Components)
• awesome-react-components - react-dragula - Drag and drop so simple it hurts. (UI Components / Form Components)
• awesome-react-components - react-dragula - Drag and drop so simple it hurts. (UI Components / Form Components)
• fucking-awesome-react-components - react-dragula - Drag and drop so simple it hurts. (UI Components / Form Components)
• react-frontend-toolkit - React Dragula - and-drop library for React based on Dragula. (🧰 React Frontend Toolkit / Drag & Drop)
• react-frontend-toolkit - React Dragula - and-drop library for React based on Dragula. (🧰 React Frontend Toolkit / Drag & Drop)

README

        
[![logo.png][3]][2]

> Drag and drop so simple it hurts

Official React wrapper for [`dragula`][4].

# Demo

[![demo.png][1]][2]

Try out the [demo][2]!

# Install

You can get it on npm.

```shell

npm install react-dragula --save

```

Or bower, too.

```shell

bower install react-dragula --save

```

# Usage

Refer to the documentation for [`dragula`][4]. The API for `react-dragula` is identical, but a few tiny tweaks were made around it so that it works out the box with React.

# Example

Here's an example application using `react` and `react-dragula`.

```jsx

var React = require('react');

var dragula = require('react-dragula');

var App = React.createClass({

  render: function () {

    return 


      
Swap me around

      
Swap her around

      
Swap him around

      
Swap them around

      
Swap us around

      
Swap things around

      
Swap everything around

    
;

  },

  componentDidMount: function () {

    var container = React.findDOMNode(this);

    dragula([container]);

  }

});

React.render(, document.getElementById('examples'));

```


# Example using refs (ES2015 syntax)

Here's an example using refs (ES2015 syntax):  [React: The ref Callback Attribute](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute)

```jsx

import * as React from "react";

import * as ReactDOM from 'react-dom';

import Dragula from 'react-dragula';

export class App extends React.Component {

  render () {

    return 


      
Swap me around

      
Swap her around

      
Swap him around

      
Swap them around

      
Swap us around

      
Swap things around

      
Swap everything around

    
;

  },

  dragulaDecorator = (componentBackingInstance) => {

    if (componentBackingInstance) {

      let options = { };

      Dragula([componentBackingInstance], options);

    }

  };

});

ReactDOM.render(, document.getElementById('examples'));

```


# License

MIT

[1]: https://github.com/bevacqua/react-dragula/blob/master/resources/demo.png

[2]: http://bevacqua.github.io/react-dragula/

[3]: https://github.com/bevacqua/react-dragula/blob/master/resources/logo.png

[4]: https://github.com/bevacqua/dragula