{"id":13422236,"url":"https://github.com/Paol-imi/muuri-react","last_synced_at":"2025-03-15T11:31:33.040Z","repository":{"id":39649365,"uuid":"230963289","full_name":"paol-imi/muuri-react","owner":"paol-imi","description":"The layout engine for React","archived":false,"fork":false,"pushed_at":"2023-06-22T18:15:21.000Z","size":35658,"stargazers_count":356,"open_issues_count":33,"forks_count":50,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-31T00:12:38.582Z","etag":null,"topics":["bin-packing","drag-and-drop","filter","grid","grids","layout","layout-engine","muuri","react","sorting"],"latest_commit_sha":null,"homepage":"https://paol-imi.github.io/muuri-react/","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/paol-imi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-30T18:42:22.000Z","updated_at":"2024-08-26T15:31:28.000Z","dependencies_parsed_at":"2024-06-18T18:36:33.895Z","dependency_job_id":null,"html_url":"https://github.com/paol-imi/muuri-react","commit_stats":{"total_commits":74,"total_committers":3,"mean_commits":"24.666666666666668","dds":0.472972972972973,"last_synced_commit":"3fd98e8fd22a06d6f646292c04689a6624e1bc81"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paol-imi%2Fmuuri-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paol-imi%2Fmuuri-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paol-imi%2Fmuuri-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paol-imi%2Fmuuri-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paol-imi","download_url":"https://codeload.github.com/paol-imi/muuri-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221572080,"owners_count":16845576,"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":["bin-packing","drag-and-drop","filter","grid","grids","layout","layout-engine","muuri","react","sorting"],"created_at":"2024-07-30T23:00:40.096Z","updated_at":"2024-10-26T19:32:43.297Z","avatar_url":"https://github.com/paol-imi.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/Paol-imi/muuri-react/master/website/static/logo/muuri-transparent.png\" width=\"40%\" /\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/Paol-imi/muuri-react/master/website/static/logo/muuri-react.png\" width=\"47%\" /\u003e\n\u003c/div\u003e\n\n\u003ch1\u003e\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n**Responsive**, **sortable**, **filterable** and **draggable** grid layouts with [`React`](https://reactjs.org/)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm](https://img.shields.io/npm/v/muuri-react.svg?style=flat-square)](http://npm.im/muuri-react)\n[![React: Component](https://img.shields.io/badge/React-Component-26C9FF?style=flat-square\u0026logo=react)](http://npm.im/muuri-react)\n[![Circle Ci](https://img.shields.io/circleci/build/github/Paol-imi/muuri-react?style=flat-square)](https://app.circleci.com/pipelines/github/Paol-imi/muuri-react)\n[![Code style: Prettier](https://img.shields.io/badge/Code_style-Prettier-ff69b4.svg?style=flat-square\u0026logo=prettier)](https://prettier.io/)\n[![Typescript: Codebase](https://img.shields.io/badge/Types-Typescript-red?style=flat-square\u0026logo=typescript)](https://www.typescriptlang.org/)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://swtf9.csb.app/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/Paol-imi/muuri-react/master/website/static/gifs/pokedex.gif\" width=\"74%\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cimg /\u003e\n\n## Design Principles 👨🏻‍🏫\n\n**Muuri-React** is the React implementation of the amazing [**Muuri**](https://github.com/haltu/muuri) layout engine. This library allows you to build all kinds of layouts with [**React**](https://reactjs.org/) and make them responsive, sortable, filterable, draggable and/or animated. \u003cbr\u003e\nAll Muuri features are implemented in a **React-friendly** way, with custom **components** and **hooks**, to guarantee the simplest **developer experience**.\n\n## Features 💎\n\n- Fully customizable layout 📐\n- Drag-and-drop (even between grids) ✋\n- Simple, Powerful, and Intuitive API ⚡️\n- Extremely performant 🚀\n- Custom hooks 🔌\n- Nested grids 📎\n- Scrollable grids 🖱️\n- Filtering ✔\n- Sorting 🗃\n- Support IE9+ _(with polyfills)_ 🌐\n- Touch support 📱\n- Typescript ✍️\n- Fully open source ‍⚖️\n\n## Documentation 📖\n\nYou can find the full documentation [**here**](https://paol-imi.github.io/muuri-react).\n\n## Examples 💡\n\nAll [**examples**](https://paol-imi.github.io/muuri-react/showcase) have been created to explain one or more **features** of Muuri-react in an **easy** and direct way.\n\n\u003cdiv align=\"center\"\u003e \n\u003ca href=\"https://1czo5.csb.app/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Paol-imi/muuri-react/master/website/static/gifs/grid.gif\" width=\"53.2%\" \u003e\u003c/img\u003e\u003c/a\u003e\u003cimg width=\"0.8%\"\u003e\u003c/img\u003e\u003ca href=\"https://zmypd.csb.app/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Paol-imi/muuri-react/master/website/static/gifs/kanban.gif\" width=\"46%\" \u003e\u003c/img\u003e\u003c/a\u003e\n\u003ca href=\"https://penbe.csb.app/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Paol-imi/muuri-react/master/website/static/gifs/dashboard.gif\" width=\"40.6%\" \u003e\u003c/img\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## Motivation 👨🏻‍🏫\n\nYou can build pretty amazing **layouts** without a single line of JavaScript these days. However, sometimes CSS just isn't enough, and that's where Muuri comes along. At it's very core **Muuri** is a layout engine which is limited only by your **imagination**💭. You can build any kind of layout, asynchronously in web workers if you wish.\n\nLayouts aside, you might need to sprinkle some flare (**animations**⚡) and interactivity (**filtering**, **sorting**, **drag\u0026nbsp;and\u0026nbsp;drop**✋) on your layout. Stuff gets complex pretty fast and most of us probably reach for existing libraries to handle the complexity at that point. This is why most of these extra **features** are built into Muuri's **core**, so you don't have to go hunting for additional libraries or re-inventing the wheel for the nth time.\n\nThe long-term goal of Muuri is to provide a simple (and as low-level as possible) API for building amazing layouts with unmatched **performance**🚀 and most of the **complexity**📦 abstracted away.\n\n## Help us grow ❤️\n\n**Muuri-react** was born recently but is already very stable and full of features as it is based on the amazing **Muuri** layout engine. If you **like** 👍 this project you can help us grow by **starring** ⭐ the repository.\n\n## Contributing 🎗️\n\nContributions are always welcome. Before contributing, please read our [**Guidlines**](https://raw.githubusercontent.com/Paol-imi/muuri-react/master/CONTRIBUTING.md).\n\n## Credits 🤝\n\nThanks to [**Niklas Rämö**](https://github.com/niklasramo) for the amazing work with [**Muuri**](https://github.com/haltu/muuri).\n\n## License ©\n\nCopyright © 2020 [**Paolo Longo**](https://github.com/Paol-imi) • [**MIT license**](LICENSE).\n","funding_links":[],"categories":["UI Layout","UI Components"],"sub_categories":["Form Components","Layout"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPaol-imi%2Fmuuri-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPaol-imi%2Fmuuri-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPaol-imi%2Fmuuri-react/lists"}