react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.

  •        119

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

https://github.com/STRML/react-grid-layout

Dependencies:

classnames : 2.x
lodash.isequal : ^4.0.0
prop-types : 15.x
react-draggable : 3.x
react-resizable : 1.x

Tags
Implementation
License
Platform

   




Related Projects

vue-grid-layout - A draggable and resizable grid layout, for Vue.js.

  •    Vue

This is the initial layout of the grid. The value must be an Array of Object items. Each item must have i, x, y, w and h proprties. Please refer to GridItem documentation below for more informations.

react-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React

  •    Javascript

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo. The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

grid - Drag and drop library for two-dimensional, resizable and responsive lists

  •    Javascript

The first constructor parameter is an array of items to populate the grid with. Build the grid structure from scratch, using the positions of the given items. If items lack positional attributes (x and y), they will be misplaced, possibly overlapping. If you want to build a grid around a list of items that only have their size attributes defined (w and h), and rely on the library to position them two-dimensionally, use resizeGrid.

react-rnd - 🖱 A resizable and draggable component for React.

  •    TypeScript

A resizable and draggable component for React. The width and height property is used to set the default size of the component. For example, you can set 300, '300px', 50%. If omitted, set 'auto'.

react-smooth-dnd - react wrapper components for smooth-dnd

  •    Javascript

A fast and lightweight drag&drop, sortable library for React with many configuration options covering many d&d scenarios. It uses css transitions for animations so it's hardware accelerated whenever possible. This library consists wrapper React components over smooth-dnd library.


react-dnd - Drag and Drop for React

  •    TypeScript

Drag and Drop for React. Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.

interact

  •    Javascript

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+). Visit http://interactjs.io/docs for the API documentation.

Sortable - Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices

  •    Javascript

Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists. You can use any element for the list and its elements, not just ul/li. Here is an example with divs.

grid-styled - Responsive React grid system built with styled-system

  •    Javascript

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

autoresponsive-react - Auto Responsive Layout Library For React

  •    Javascript

Auto responsive grid layout library for React.See our CONTRIBUTING.md for information on how to contribute.

react-native-super-grid - Responsive Grid View for React Native

  •    Javascript

Responsive Grid View for React Native. This component renders a Grid View that adapts itself to various screen resolutions.

draggable - The JavaScript Drag & Drop library your grandparents warned you about.

  •    Javascript

Get complete control over drag and drop behaviour with Draggable! Draggable abstracts native browser events into a comprehensive API to create a custom drag and drop experience. Draggable comes with additional modules: Sortable, Droppable, Swappable. Draggable itself does not perform any sorting behaviour while dragging, but does the heavy lifting, e.g. creates mirror, emits events, manages sensor events, makes elements draggable.The additional modules are built on top of Draggable and therefore provide a similar API interface, for more information read the documentation below.

Simple-Grid - A basic responsive grid for winners

  •    HTML

Simple Grid is a basic lightweight grid, not a CSS framework. There are no styles for buttons, tables, typography etc. etc. Simple Grid comes with two different types of grids. There is a grid for content, which looks like <div class="col-1-3"></div> and a grid for layouts, which looks like <div class="col-4-12"></div>. Simple Grid is also built for responsive layouts. With fluid columns, the grid will resize to adjust to the browser resolution. To accommodate for mobile and tablet devices, the grid will essentially stack all columns, one above another, when viewed on smaller screens. To see the grid in action jump on over to the Simple Grid example page.

react-native-sortable-listview - Drag drop capable wrapper of ListView for React Native

  •    Javascript

Drag drop capable wrapper of ListView for React Native. Allows for dragging and dropping of rows with automatic scrolling while dragging. See example.

react-stack-grid - Pinterest like layout components for React.js

  •    Javascript

Pinterest like layout components for React.js. You can install the react-stack-grid from npm.

make - Your friendly small business site builder.

  •    PHP

Build a website that means business. With Make’s powerful drag and drop page builder and hundreds of Customizer options, you can effortlessly brand your site without touching a line of code. Add full-width banners, columns, and galleries to showcase your best work. The intuitive builder delivers clean, lean code — not shortcodes — so you can trust your content remains portable. Make lets you control page layout options, including sidebar display, on all your posts and pages. Choose from hundreds of Google Fonts and upload custom backgrounds everywhere. Built on a fully responsive grid, Make renders as beautifully on tablets and phone screens as it does on desktop. Make scales with your business and is fully compatible with popular plugins like WooCommerce, Gravity Forms, Contact Form 7, Jetpack, and others. For documentation on the page builder and getting started with Make, see: https://thethemefoundry.com/make-help/

dazzle - :rocket: Dashboards made easy in React JS.

  •    Javascript

Dazzle is a library for building dashboards with React JS. Dazzle does not depend on any front-end libraries but it makes it easier to integrate with them.Dazzle's goal is to be flexible and simple. Even though there are some UI components readily available out of the box, you have the complete control to override them as you wish with your own styles and layout.