{"id":16798778,"url":"https://github.com/vingeraycn/ruuri","last_synced_at":"2025-04-09T20:14:24.325Z","repository":{"id":39750529,"uuid":"485210521","full_name":"vingeraycn/ruuri","owner":"vingeraycn","description":"Any draggable layout supported based muuri for react. No depend on a specific version of react and muuri. It's free.","archived":false,"fork":false,"pushed_at":"2025-03-30T17:24:41.000Z","size":1037,"stargazers_count":31,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T20:14:01.687Z","etag":null,"topics":["drag-and-drop","grid","grids","layout-engine","muuri","muuri-react","react","ruuri","sorting"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/vingeraycn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-25T03:30:11.000Z","updated_at":"2025-02-05T03:34:23.000Z","dependencies_parsed_at":"2023-11-27T07:30:06.532Z","dependency_job_id":"42f92b6e-df1c-4423-8e9b-1ae096fe15da","html_url":"https://github.com/vingeraycn/ruuri","commit_stats":{"total_commits":76,"total_committers":3,"mean_commits":"25.333333333333332","dds":"0.17105263157894735","last_synced_commit":"5869ca40bd2f8a48c04b094bc429eeb49f0b750d"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vingeraycn%2Fruuri","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vingeraycn%2Fruuri/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vingeraycn%2Fruuri/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vingeraycn%2Fruuri/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vingeraycn","download_url":"https://codeload.github.com/vingeraycn/ruuri/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103872,"owners_count":21048245,"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","grids","layout-engine","muuri","muuri-react","react","ruuri","sorting"],"created_at":"2024-10-13T09:26:51.081Z","updated_at":"2025-04-09T20:14:24.292Z","avatar_url":"https://github.com/vingeraycn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch3 align=\"center\"\u003eAny draggable layout supported based muuri for react.\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003eThanks For Your Star ⭐️\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://badgen.net/npm/types/tslib\" /\u003e\n  \u003cimg src=\"https://badgen.net/npm/v/ruuri\" /\u003e\n  \u003cimg src=\"https://badgen.net/npm/dm/ruuri\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/19839331/181693587-7e0f62f6-11d9-4a34-826d-06caf6dde6ed.gif\" /\u003e\n\u003c/p\u003e\n\n## Features\n\n- ✅ [All features](https://github.com/haltu/muuri#:~:text=on%20the%20website.-,Features,-Fully%20customizable%20layout) of [`muuri`](https://github.com/haltu/muuri) are supported.\n- ✅ Drag between different containers.(see [Example](#examples))\n- ✅ Flexible API, easy to understand, It's React style.\n- ✅ TypeScript support.\n- ✅ ESM, CommonJS support.\n- ✅ Almost all React versions are supported, such as React 16.8, React 17, React 18 or newer.\n- ✅ New technology enthusiasts, we will keep it updated if needed.\n\n## Rencently News\n\nruuri v2 will be released soon, migration from v1 checkout [here](./CHANGELOG.md)\n\n## Table of Content\n\n- [Motivation](#motivation)\n- [Get Started](#get-started)\n- [Additional](#additional)\n- [Examples](#examples)\n- [License](#license)\n\n## Motivation\n\nTo be honest, there was already a library called [muuri-react](https://github.com/paol-imi/muuri-react) that did a React adaptation for [muuri](https://github.com/haltu/muuri) before this library came out, but it hadn't been updated for years and his examples and code didn't work with the latest React versions, and there were users in the community asking for help every year.\n\nIn fact we wanted to handle drag and drop only and not rely on a specific muuri or React version, so our product will not contain muuri or React code, the library will rely on the React and muuri versions referenced by the applicable project.\n\nWe hope that this library will turn the muuri API into something like React, a simple idea, implemented in a simple way, resulting in very low maintenance. If there are any subsequent breaking updates to muuri or the React features used, feel free to raise an issue or open a pull request.\n\n## Get Started\n\n1. Add `ruuri` and `muuri` as dependencies.\n\n```bash\nyarn add ruuri muuri\n```\n\n2. Import `ruuri` Component.\n\n```jsx\nimport DraggableGrid from 'ruuri';\n\n...\n  \u003cDraggableGrid\n    // Put your data here\n    // Every data item must have a STRING type unique key, such as the id field in data below.\n    data={[\n      {\n        id: 'id-1',\n        ...\n      },\n      {\n        id: 'id-2',\n        ...\n      }\n    ]}\n    renderItem={itemData =\u003e (\u003cdiv\u003e{ // your custom content here }\u003c/div\u003e)}\n    // pass grid options\n    // see more options docs at https://github.com/haltu/muuri#-grid-options\n    dragEnabled\n    dragSort\n    layout={\n      {\n        fillGaps: true\n      }\n    }\n\n    // pass event handlers\n    // see more event docs at https://github.com/haltu/muuri#-grid-events\n    onSend={data =\u003e {\n      // write your code here\n    }}\n    onDragStart={(data, event) =\u003e {\n      // write your code here\n    }}\n  /\u003e\n...\n```\n\n## Additional\n\n- Use handler\n  \u003e Get current muuri grid instance or container dom element by `ref`.\n\n```tsx\nimport DraggableGrid, { DraggableGridHandle } from 'ruuri';\nimport { useRef } from 'react';\n\n...\n  const ref = useRef\u003cDraggableGridHandle | null\u003e(null)\n\n  // get muuri grid instance\n  // @see https://github.com/haltu/muuri#grid-methods\n  // ref.current?.grid?.getElement()\n\n  // get muuri container dom element\n  // ref.current?.container\n\n...\n  \u003cDraggableGrid ref={ref} data={[]} /\u003e\n```\n\n- Use `getItemProps` and `getItemContentProps` to set container properties if you need it.\n```tsx\n\n...\n\nconst data: T[] = []\n\n\u003cDraggableGrid\n ...\n data={data}\n getItemProps={(itemData: T) =\u003e ({\n   style: {\n     background: 'black',\n   },\n  })}\n  getItemContentProps={(itemData: T) =\u003e ({\n    style: {\n      backgroundColor: 'pink',\n    },\n  })}\n/\u003e\n```\n\n## Examples\n\n### ruuri v2 examples\n\n- [Drag between diffrent containers with React 18](https://codesandbox.io/s/drag-between-grids-v2-3jvvnr?file=/src/App.js)\n\n### ruuri v1 examples\n\n- [With React 16.8](https://codesandbox.io/s/react-16-8-sxds98)\n- [With React 17](https://codesandbox.io/s/ruuri-on-react17-pf1px5)\n- [Drag between different containers](https://codesandbox.io/s/drag-between-grids-vxmu62)\n\n## License\n\nCopyright © 2022-2023 [vingeray](https://github.com/vingeraycn) Licensed under the [MIT license](https://github.com/vingeraycn/ruuri/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvingeraycn%2Fruuri","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvingeraycn%2Fruuri","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvingeraycn%2Fruuri/lists"}