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

Feel free to contribute to this wiki with new recipe.