GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → Paol-imi → Muuri React

Paol-imi / Muuri React

Licence: mit
The layout engine for React

Programming Languages

typescript
32286 projects

Labels

reactgridfilterlayoutdrag-and-dropsortinglayout-engine

Projects that are alternatives of or similar to Muuri React

Muuri
Infinite responsive, sortable, filterable and draggable layouts
Stars: ✭ 9,797 (+5910.43%)
Mutual labels:  layout, grid, filter, drag-and-drop
The Grid
Grid layout custom element with drag and drop capabilities
Stars: ✭ 122 (-25.15%)
Mutual labels:  layout, grid, drag-and-drop
React Sortable Hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Stars: ✭ 9,747 (+5879.75%)
Mutual labels:  grid, drag-and-drop, sorting
Tablefilter
A Javascript library making HTML tables filterable and a bit more :)
Stars: ✭ 248 (+52.15%)
Mutual labels:  grid, filter, sorting
Easygrid
EasyGrid - VanillaJS Responsive Grid
Stars: ✭ 77 (-52.76%)
Mutual labels:  layout, grid, filter
Shuffle
Categorize, sort, and filter a responsive grid of items
Stars: ✭ 2,170 (+1231.29%)
Mutual labels:  layout, grid, filter
Queryql
Easily add filtering, sorting, and pagination to your Node.js REST API through your old friend: the query string!
Stars: ✭ 76 (-53.37%)
Mutual labels:  filter, sorting
Interior
Design system for the modern web.
Stars: ✭ 77 (-52.76%)
Mutual labels:  layout, grid
React Native Flexbox Grid
Responsive Grid for React Native
Stars: ✭ 95 (-41.72%)
Mutual labels:  layout, grid
Depressurizer
A Steam library categorizing tool.
Stars: ✭ 1,008 (+518.4%)
Mutual labels:  filter, sorting
React Photo Layout Editor
Photo layout editor for react
Stars: ✭ 96 (-41.1%)
Mutual labels:  layout, grid
Flexlayout
FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.
Stars: ✭ 1,342 (+723.31%)
Mutual labels:  layout, layout-engine
Framelayoutkit
FrameLayoutKit is a super fast and easy to use autolayout kit
Stars: ✭ 53 (-67.48%)
Mutual labels:  layout, layout-engine
Filterable
Filtering from incoming params in Elixir/Ecto/Phoenix with easy to use DSL.
Stars: ✭ 83 (-49.08%)
Mutual labels:  filter, sorting
Masonry Layout
An efficient and fast web component that gives you a beautiful masonry layout
Stars: ✭ 43 (-73.62%)
Mutual labels:  layout, grid
Stack Up.js
Create fixed width, variable height grid layouts.
Stars: ✭ 117 (-28.22%)
Mutual labels:  layout, grid
Greedo Layout For Android
Full aspect ratio grid LayoutManager for Android's RecyclerView
Stars: ✭ 1,588 (+874.23%)
Mutual labels:  layout, grid
Pinlayout
Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]
Stars: ✭ 1,870 (+1047.24%)
Mutual labels:  layout, layout-engine
Ng2 Flex Table
Angular 4 Table - Beautiful Table especially made for non-relational databases. With inline editing, column search & filter and fixed headers.
Stars: ✭ 15 (-90.8%)
Mutual labels:  filter, sorting
Allkit
🛠 Async List Layout Kit
Stars: ✭ 40 (-75.46%)
Mutual labels:  layout, layout-engine
View All Similar Projects ➔

Responsive, sortable, filterable and draggable grid layouts with React

npm React: Component Circle Ci Code style: Prettier Typescript: Codebase

Design Principles 👨🏻‍🏫

Muuri-React is the React implementation of the amazing Muuri layout engine. This library allows you to build all kinds of layouts with React 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.

Examples 💡

All examples 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.

Credits 🤝

Thanks to Niklas Rämö for the amazing work with Muuri.

License ©

Copyright © 2020 Paolo Longo • MIT license.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].