{"id":13422134,"url":"https://github.com/bevacqua/react-dragula","last_synced_at":"2025-05-15T10:06:31.883Z","repository":{"id":35915212,"uuid":"40202688","full_name":"bevacqua/react-dragula","owner":"bevacqua","description":":ok_hand: Drag and drop so simple it hurts","archived":false,"fork":false,"pushed_at":"2020-09-09T17:28:40.000Z","size":1209,"stargazers_count":999,"open_issues_count":27,"forks_count":77,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-15T10:05:37.678Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://bevacqua.github.io/react-dragula","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bevacqua.png","metadata":{"files":{"readme":"readme.markdown","changelog":"changelog.markdown","contributing":"contributing.markdown","funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-04T18:40:21.000Z","updated_at":"2025-05-10T23:14:10.000Z","dependencies_parsed_at":"2022-08-30T20:01:43.849Z","dependency_job_id":null,"html_url":"https://github.com/bevacqua/react-dragula","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevacqua%2Freact-dragula","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevacqua%2Freact-dragula/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevacqua%2Freact-dragula/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bevacqua%2Freact-dragula/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bevacqua","download_url":"https://codeload.github.com/bevacqua/react-dragula/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319720,"owners_count":22051073,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T23:00:37.719Z","updated_at":"2025-05-15T10:06:26.867Z","avatar_url":"https://github.com/bevacqua.png","language":"JavaScript","funding_links":[],"categories":["UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","JavaScript","🧰 React Toolkit"],"sub_categories":["Form Components","Device Input/User Action","Drag \u0026 Drop"],"readme":"[![logo.png][3]][2]\n\n\u003e Drag and drop so simple it hurts\n\nOfficial React wrapper for [`dragula`][4].\n\n# Demo\n\n[![demo.png][1]][2]\n\nTry out the [demo][2]!\n\n# Install\n\nYou can get it on npm.\n\n```shell\nnpm install react-dragula --save\n```\n\nOr bower, too.\n\n```shell\nbower install react-dragula --save\n```\n\n# Usage\n\nRefer 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.\n\n# Example\n\nHere's an example application using `react` and `react-dragula`.\n\n```jsx\nvar React = require('react');\nvar dragula = require('react-dragula');\nvar App = React.createClass({\n  render: function () {\n    return \u003cdiv className='container'\u003e\n      \u003cdiv\u003eSwap me around\u003c/div\u003e\n      \u003cdiv\u003eSwap her around\u003c/div\u003e\n      \u003cdiv\u003eSwap him around\u003c/div\u003e\n      \u003cdiv\u003eSwap them around\u003c/div\u003e\n      \u003cdiv\u003eSwap us around\u003c/div\u003e\n      \u003cdiv\u003eSwap things around\u003c/div\u003e\n      \u003cdiv\u003eSwap everything around\u003c/div\u003e\n    \u003c/div\u003e;\n  },\n  componentDidMount: function () {\n    var container = React.findDOMNode(this);\n    dragula([container]);\n  }\n});\nReact.render(\u003cApp /\u003e, document.getElementById('examples'));\n```\n\n# Example using refs (ES2015 syntax)\n\nHere'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)\n\n```jsx\nimport * as React from \"react\";\nimport * as ReactDOM from 'react-dom';\nimport Dragula from 'react-dragula';\nexport class App extends React.Component {\n  render () {\n    return \u003cdiv className='container' ref={this.dragulaDecorator}\u003e\n      \u003cdiv\u003eSwap me around\u003c/div\u003e\n      \u003cdiv\u003eSwap her around\u003c/div\u003e\n      \u003cdiv\u003eSwap him around\u003c/div\u003e\n      \u003cdiv\u003eSwap them around\u003c/div\u003e\n      \u003cdiv\u003eSwap us around\u003c/div\u003e\n      \u003cdiv\u003eSwap things around\u003c/div\u003e\n      \u003cdiv\u003eSwap everything around\u003c/div\u003e\n    \u003c/div\u003e;\n  },\n  dragulaDecorator = (componentBackingInstance) =\u003e {\n    if (componentBackingInstance) {\n      let options = { };\n      Dragula([componentBackingInstance], options);\n    }\n  };\n});\nReactDOM.render(\u003cApp /\u003e, document.getElementById('examples'));\n```\n\n# License\n\nMIT\n\n[1]: https://github.com/bevacqua/react-dragula/blob/master/resources/demo.png\n[2]: http://bevacqua.github.io/react-dragula/\n[3]: https://github.com/bevacqua/react-dragula/blob/master/resources/logo.png\n[4]: https://github.com/bevacqua/dragula\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbevacqua%2Freact-dragula","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbevacqua%2Freact-dragula","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbevacqua%2Freact-dragula/lists"}