{"id":13448611,"url":"https://github.com/bmcmahen/react-grid-dnd","last_synced_at":"2025-04-04T16:12:59.976Z","repository":{"id":34888979,"uuid":"186702015","full_name":"bmcmahen/react-grid-dnd","owner":"bmcmahen","description":"drag and drop, grid edition. built with react","archived":false,"fork":false,"pushed_at":"2022-12-09T23:44:55.000Z","size":1874,"stargazers_count":221,"open_issues_count":57,"forks_count":49,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-27T04:08:25.232Z","etag":null,"topics":["drag-and-drop","grid","react"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/embed/gracious-wozniak-kj9w8","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bmcmahen.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-14T21:19:48.000Z","updated_at":"2025-03-19T23:35:18.000Z","dependencies_parsed_at":"2023-01-15T10:00:54.472Z","dependency_job_id":null,"html_url":"https://github.com/bmcmahen/react-grid-dnd","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-grid-dnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-grid-dnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-grid-dnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmcmahen%2Freact-grid-dnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmcmahen","download_url":"https://codeload.github.com/bmcmahen/react-grid-dnd/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208139,"owners_count":20901570,"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":["drag-and-drop","grid","react"],"created_at":"2024-07-31T05:01:50.517Z","updated_at":"2025-04-04T16:12:59.956Z","avatar_url":"https://github.com/bmcmahen.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\u003cdiv align=\"center\"\u003e\n \u003cimg \n    max-width=\"300px\"\n    alt=\"A demo showing views being swiped left and right.\"\n     src=\"https://raw.githubusercontent.com/bmcmahen/react-dnd-grid/master/demo.gif\"\u003e\n\u003c/div\u003e\n\n# react-grid-dnd\n\n[![npm package](https://img.shields.io/npm/v/react-dnd-grid/latest.svg)](https://www.npmjs.com/package/react-dnd-grid)\n[![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social\u0026logo=twitter)](https://twitter.com/intent/follow?screen_name=benmcmahen)\n\nGrid style drag and drop, built with React. See a live example on [codesandbox](https://codesandbox.io/embed/gracious-wozniak-kj9w8). You can also see it in action [here](https://react-gesture-responder.netlify.com/).\n\n## Features\n\n- **Supports dragging between arbitrary number of lists**.\n- **Built with [react-gesture-responder](https://github.com/bmcmahen/react-gesture-responder) to enable better control over gesture delegation.**\n- **Disable drop targets or dragging altogether**\n- **Animated with react-spring**\n\n## Install\n\nInstall `react-grid-dnd` and `react-gesture-responder` using yarn or npm.\n\n```\nyarn add react-grid-dnd react-gesture-responder\n```\n\n## Usage\n\nBecause `GridItem` components are rendered with absolute positioning, you need to ensure that `GridDropZone` has a specified height or flex, like in the example below.\n\n```jsx\nimport {\n  GridContextProvider,\n  GridDropZone,\n  GridItem,\n  swap\n} from \"react-grid-dnd\";\n\nfunction Example() {\n  const [items, setItems] = React.useState([1, 2, 3, 4]); // supply your own state\n\n  // target id will only be set if dragging from one dropzone to another.\n  function onChange(sourceId, sourceIndex, targetIndex, targetId) {\n    const nextState = swap(items, sourceIndex, targetIndex);\n    setItems(nextState);\n  }\n\n  return (\n    \u003cGridContextProvider onChange={onChange}\u003e\n      \u003cGridDropZone\n        id=\"items\"\n        boxesPerRow={4}\n        rowHeight={100}\n        style={{ height: \"400px\" }}\n      \u003e\n        {items.map(item =\u003e (\n          \u003cGridItem key={item}\u003e\n            \u003cdiv\n              style={{\n                width: \"100%\",\n                height: \"100%\"\n              }}\n            \u003e\n              {item}\n            \u003c/div\u003e\n          \u003c/GridItem\u003e\n        ))}\n      \u003c/GridDropZone\u003e\n    \u003c/GridContextProvider\u003e\n  );\n}\n```\n\n## Dragging between lists\n\nYou can see this example in action on [codesandbox](https://codesandbox.io/embed/gracious-wozniak-kj9w8).\n\n```jsx\nimport {\n  GridContextProvider,\n  GridDropZone,\n  GridItem,\n  swap,\n  move\n} from \"react-grid-dnd\";\n\nfunction App() {\n  const [items, setItems] = React.useState({\n    left: [\n      { id: 1, name: \"ben\" },\n      { id: 2, name: \"joe\" },\n      { id: 3, name: \"jason\" },\n      { id: 4, name: \"chris\" },\n      { id: 5, name: \"heather\" },\n      { id: 6, name: \"Richard\" }\n    ],\n    right: [\n      { id: 7, name: \"george\" },\n      { id: 8, name: \"rupert\" },\n      { id: 9, name: \"alice\" },\n      { id: 10, name: \"katherine\" },\n      { id: 11, name: \"pam\" },\n      { id: 12, name: \"katie\" }\n    ]\n  });\n\n  function onChange(sourceId, sourceIndex, targetIndex, targetId) {\n    if (targetId) {\n      const result = move(\n        items[sourceId],\n        items[targetId],\n        sourceIndex,\n        targetIndex\n      );\n      return setItems({\n        ...items,\n        [sourceId]: result[0],\n        [targetId]: result[1]\n      });\n    }\n\n    const result = swap(items[sourceId], sourceIndex, targetIndex);\n    return setItems({\n      ...items,\n      [sourceId]: result\n    });\n  }\n\n  return (\n    \u003cGridContextProvider onChange={onChange}\u003e\n      \u003cdiv className=\"container\"\u003e\n        \u003cGridDropZone\n          className=\"dropzone left\"\n          id=\"left\"\n          boxesPerRow={4}\n          rowHeight={70}\n        \u003e\n          {items.left.map(item =\u003e (\n            \u003cGridItem key={item.name}\u003e\n              \u003cdiv className=\"grid-item\"\u003e\n                \u003cdiv className=\"grid-item-content\"\u003e\n                  {item.name[0].toUpperCase()}\n                \u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/GridItem\u003e\n          ))}\n        \u003c/GridDropZone\u003e\n        \u003cGridDropZone\n          className=\"dropzone right\"\n          id=\"right\"\n          boxesPerRow={4}\n          rowHeight={70}\n        \u003e\n          {items.right.map(item =\u003e (\n            \u003cGridItem key={item.name}\u003e\n              \u003cdiv className=\"grid-item\"\u003e\n                \u003cdiv className=\"grid-item-content\"\u003e\n                  {item.name[0].toUpperCase()}\n                \u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/GridItem\u003e\n          ))}\n        \u003c/GridDropZone\u003e\n      \u003c/div\u003e\n    \u003c/GridContextProvider\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmcmahen%2Freact-grid-dnd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmcmahen%2Freact-grid-dnd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmcmahen%2Freact-grid-dnd/lists"}