-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Users recipes
The WidthProvider
component provides a width
prop to its child.
Using an intermediate component, you can access this width and easily compute the current breakpoint.
import { Responsive, WidthProvider } from 'react-grid-layout'
const IntermediateGrid = ({width, ...otherProps}) => {
console.log("current breakpoint:", Responsive.utils.getBreakpointFromWidth(yourBreakpoints, width))
return <Responsive width={width} {...otherProps} />
}
const FullGrid = WidthProvider(IntermediateGrid);
Last tested: OK @eric-burel January 2020
In non responsive mode, use the onLayoutChange
callback to store the layout.
In responsive mode, you may also need to track the breakpoint to select the correct layout in the layouts
map: layouts[currentBreakpoint]
.
Last tested: OK @eric-burel January 2020
You can systematically provide a data-grid
prop to grid items. If the item has a layout, it will be ignored.
If it doesn't, it will be used as the default layout. Therefore you can use it to define the initial width/height
of new items that do not yet possess a layout.
However you will also need to define default x
and y
, even if you only want to modify the size of new items.
You can set x
to 0. You can also set y
to 0 but it may interfere with existing items.
If your grid is compacted vertically, you can use y=Infinity
.
Otherwise, you may want to compute the bottom from the current layout, see the example below.
import { bottom } from 'react-grid-layout/lib/utils'
...
<GridItem key="wathever" data-grid={{w:4, h:4, x:0, y: bottom(layout)}} />
Last tested: OK @eric-burel January 2020
Instead of rearranging the entire grid, it may be desired to only swap two items.
const onDragStop = (layout: Layout[], oldItem: Layout, newItem: Layout) => {
const swapTarget = layout
.filter(item => item.i != oldItem.i)
.find((item) => item.y === newItem.y && item.x == newItem.x);
if (!swapTarget) {
const index = layout.findIndex(item => item.i == oldItem.i);
layout[index].x = oldItem.x;
layout[index].y = oldItem.y;
} else {
const index = layout.findIndex(item => item.i == swapTarget.i);
layout[index].x = oldItem.x;
layout[index].y = oldItem.y;
}
};
<GridLayout
onDragStop={onDragStop}
allowOverlap
...
>
...
</GridLayout>
Feel free to contribute to this wiki with new recipe.