**Responsive**, **sortable**, **filterable** and **draggable** grid layouts with [`React`](https://reactjs.org/)
[![npm](https://img.shields.io/npm/v/muuri-react.svg?style=flat-square)](http://npm.im/muuri-react) [![React: Component](https://img.shields.io/badge/React-Component-26C9FF?style=flat-square&logo=react)](http://npm.im/muuri-react) [![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) [![Code style: Prettier](https://img.shields.io/badge/Code_style-Prettier-ff69b4.svg?style=flat-square&logo=prettier)](https://prettier.io/) [![Typescript: Codebase](https://img.shields.io/badge/Types-Typescript-red?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
## Design Principles πŸ‘¨πŸ»β€πŸ« **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.
All Muuri features are implemented in a **React-friendly** way, with custom **components** and **hooks**, to guarantee the simplest **developer experience**. ## Features πŸ’Ž - Fully customizable layout πŸ“ - Drag-and-drop (even between grids) βœ‹ - Simple, Powerful, and Intuitive API ⚑️ - Extremely performant πŸš€ - Custom hooks πŸ”Œ - Nested grids πŸ“Ž - Scrollable grids πŸ–±οΈ - Filtering βœ” - Sorting πŸ—ƒ - Support IE9+ _(with polyfills)_ 🌐 - Touch support πŸ“± - Typescript ✍️ - Fully open source β€βš–οΈ ## Documentation πŸ“– You can find the full documentation [**here**](https://paol-imi.github.io/muuri-react). ## Examples πŸ’‘ All [**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.
## Motivation πŸ‘¨πŸ»β€πŸ« You 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. Layouts aside, you might need to sprinkle some flare (**animations**⚑) and interactivity (**filtering**, **sorting**, **drag and 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. The 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. ## Help us grow ❀️ **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. ## Contributing πŸŽ—οΈ Contributions are always welcome. Before contributing, please read our [**Guidlines**](https://raw.githubusercontent.com/Paol-imi/muuri-react/master/CONTRIBUTING.md). ## Credits 🀝 Thanks to [**Niklas RΓ€mΓΆ**](https://github.com/niklasramo) for the amazing work with [**Muuri**](https://github.com/haltu/muuri). ## License Β© Copyright Β© 2020 [**Paolo Longo**](https://github.com/Paol-imi) β€’ [**MIT license**](LICENSE).