react-grid-layout-between

A draggable grid layout , can between two or more Layouts, for React.

Usage no npm install needed!

<script type="module">
  import reactGridLayoutBetween from 'https://cdn.skypack.dev/react-grid-layout-between';
</script>

README

react-grid-layout-between

A draggable and resizable grid layout with responsive breakpoints , can between two or more Layouts, for React. Based on React-DnD.

react 16.8.6 npm 6.9.0 react-dnd JavaScript Style Guide

picgif

Live Demo : http://demo.sunxinfei.com/

Install

npm install --save react-grid-layout-between

Usage

import React, { Component } from 'react'

import GridLayout from 'react-grid-layout-between'
import 'react-grid-layout-between/dist/index.css'

class Example extends Component {
  render() {
    return <GridLayout />
  }
}

Features:

  • get <reac-grid-layout-between /> component

  • DnD widgets between layouts

  • 100% React

  • Draggable widgets

  • Configurable packing: horizontal, vertical

  • Bounds checking for dragging

  • Responsive breakpoints

  • Separate layouts per responsive breakpoint

  • Grid Items placed using CSS Transforms

  • Drag Custom Preview

  • Drag widgets colliseion by gravity center

  • Static widgets

  • Resizable widgets

  • Support touchable device Issue

bugs:

  • when 2x2 or 1x2 collosion bug for horizontal

License

MIT © SunXinFei