React-grid-layout: dynamic width change for dragging items to left/right beyond the layout limits

[derisen]

Any suggestions would be appreciated!

[just-joshing]

I'm currently testing out this library with a similar requirement.
I was able to achieve this effect by writing a component that has a maxColumns state variable which gets updated during onDrag.

For example (I'm writing this example using TypeScript and am omitting some code):

// omitting imports
...
// omitting interface declaration for MyGridProps
...

class MyGrid extends React.Component<MyGridProps, { maxColumns: number }> {
    public constructor(props: MyGridProps) {
        super(props);
        this.state = {
            maxColumns: Math.max(...this.props.items.map(item => item.x + item.w)
        };
    }

    public render(): JSX.Element {
        const { maxColumns: cols } = this.state;
        const cellDim = 160;
        const margin = 10;
        return <ReactGridLayout
            cols={cols}
            width={cellDim * cols + margin * (cols + 1)}
            onLayoutChange={this.updateMaxColumns}
            onDrag={this.updateMaxColumns}
            // omitting more props (like layout)
            ...
        >
            {this.props.items}
        </ReactGridLayout>
    }

    private updateMaxColumns = (layouts: ReactGridLayout.Layout[]): void => {
        this.setState(
            maxColumns: Math.max(
                this.state.maxColumns,
                Math.max(...layouts.map(layout => layout.x + layout.w)) + 1
            )
        );
    }

    // omitting more methods
    ...
}

Hope this helps you!

[derisen]

works like a charm -thank you so much!

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days