Awesome Open Source
Awesome Open Source

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.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (10,847)Β 
react (5,286)Β 
grid (216)Β 
filter (200)Β 
layout (176)Β 
drag-and-drop (128)Β 
sorting (47)Β 
layout-engine (23)Β 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising πŸ“¦Β 10
All Projects
Application Programming Interfaces πŸ“¦Β 124
Applications πŸ“¦Β 192
Artificial Intelligence πŸ“¦Β 78
Blockchain πŸ“¦Β 73
Build Tools πŸ“¦Β 113
Cloud Computing πŸ“¦Β 80
Code Quality πŸ“¦Β 28
Collaboration πŸ“¦Β 32
Command Line Interface πŸ“¦Β 49
Community πŸ“¦Β 83
Companies πŸ“¦Β 60
Compilers πŸ“¦Β 63
Computer Science πŸ“¦Β 80
Configuration Management πŸ“¦Β 42
Content Management πŸ“¦Β 175
Control Flow πŸ“¦Β 213
Data Formats πŸ“¦Β 78
Data Processing πŸ“¦Β 276
Data Storage πŸ“¦Β 135
Economics πŸ“¦Β 64
Frameworks πŸ“¦Β 215
Games πŸ“¦Β 129
Graphics πŸ“¦Β 110
Hardware πŸ“¦Β 152
Integrated Development Environments πŸ“¦Β 49
Learning Resources πŸ“¦Β 166
Legal πŸ“¦Β 29
Libraries πŸ“¦Β 129
Lists Of Projects πŸ“¦Β 22
Machine Learning πŸ“¦Β 347
Mapping πŸ“¦Β 64
Marketing πŸ“¦Β 15
Mathematics πŸ“¦Β 55
Media πŸ“¦Β 239
Messaging πŸ“¦Β 98
Networking πŸ“¦Β 315
Operating Systems πŸ“¦Β 89
Operations πŸ“¦Β 121
Package Managers πŸ“¦Β 55
Programming Languages πŸ“¦Β 245
Runtime Environments πŸ“¦Β 100
Science πŸ“¦Β 42
Security πŸ“¦Β 396
Social Media πŸ“¦Β 27
Software Architecture πŸ“¦Β 72
Software Development πŸ“¦Β 72
Software Performance πŸ“¦Β 58
Software Quality πŸ“¦Β 133
Text Editors πŸ“¦Β 49
Text Processing πŸ“¦Β 136
User Interface πŸ“¦Β 330
User Interface Components πŸ“¦Β 514
Version Control πŸ“¦Β 30
Virtualization πŸ“¦Β 71
Web Browsers πŸ“¦Β 42
Web Servers πŸ“¦Β 26
Web User Interface πŸ“¦Β 210