Stack Overflow
Stack Overflow

Questions tagged [react-grid-layout]

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

162 questions
23
votes
4 answers

React Pass function to child component

I want to pass a function to a child component but I'm getting this error. Invalid value for prop passedFunction on
tag. class Parent extends Component { passedFunction(){} render() {
Lunny
  • 852
  • 1
  • 10
  • 23
21
votes
3 answers

reactjs draggable and resizeable component

for the past few hours I have been trying to search for a way to make a react component draggable and resizable. I have found a way to make it draggable with react drag and drop, but I can't find a simple way to make it resizeable :/ Does anyone…
user2882307
16
votes
2 answers

Programmatically change height/width of items in react-grid-layout

Is there a way to programmatically change w and h of an item's layout? The use case is to have a "collapse" button which reduces the height to a constant height, enough to leave the header of the item. To do this my original idea was to keep layouts…
ZekeDroid
  • 7,089
  • 5
  • 33
  • 59
14
votes
4 answers

How to handle condition rendering in react

I am using react-grid-layout This to enable drag and drop and resizing in my website. SO drag and drop I am able to achieve and storing my layout to local storage is also done. I am using Local storage to save my layout for better user experience…
vivek singh
  • 417
  • 2
  • 12
  • 36
8
votes
2 answers

How to create dynamic drag and drop layout with react-grid-layout

I am using react-grid-layout to make drag-drop and resize components, So i am able to achieve the functionality as mentioned in the doc. My Issue I am creating dynamic UI so I am rendering my UI with data. Here in this library I need to create…
manish thakur
  • 760
  • 9
  • 35
  • 76
5
votes
1 answer

react-grid-layout Error: not mounted on DragStart

When attempting to drag around or resize any panel within my ResponsiveGridLayout i'm getting the following error: not mounted on DragStart! Here is my GridLayout:
Javier Montoya
  • 171
  • 2
  • 7
5
votes
2 answers

Unable to get Plotly.js graph to resize within react-grid-layout

I have been working on a react-grid-layout to display and move graphs around on screen. Currently I am able to add a plotly.js graph to a container. It is moveable but does not resize with the container. I am wondering if an async function is…
lallen6
  • 71
  • 6
4
votes
2 answers

React get size of parent element within ResponsiveReactGridLayout

I'm trying to render a dashboard using ResponsiveReactGridLayout and my code in the functional component is as follows: const Home = () => { const [coins, setCoins] = useState(latestCoins); const [coin, setCoin] = useState(curCoin); const…
Shubhankar Agrawal
  • 181
  • 9
4
votes
1 answer

Only one highcharts using react-grid-layout can resize

I am building a dashboard using React-Grid-Layout that will consist of grids that will house widgets (i.e. charts, calendars etc.). Each grid will be draggable, responsive and resizable (widget in grid will resize too). My code; import React, {…
Gerald Goh
  • 55
  • 5
4
votes
0 answers

Auto-size data-grid of react-grid-layout

I am using responsive react grid layout in a container where i have expandable/collapsible side bar. As of now when RGL is getting loaded with all its data-grid items, it looks perfect however when i expand/collapse sidebar (which changes the parent…
K..
  • 41
  • 1
4
votes
3 answers

Is it possible to get initial breakpoint using react-grid-layout?

Using https://github.com/STRML/react-grid-layout I need to know the current breakpoint on componentDidMount. Based on breakpoint, I know what item sizes I should provide (grid items are "picked up" by user from multiple select). react-grid-layout…
ziggy
  • 45
  • 1
  • 8
4
votes
1 answer

Using custom component with react-layout-grid

I am using https://github.com/strml/react-grid-layout to create a layout of items which I can resize and move. The problem I'm having has been raised in multiple issues (below) against the repo with little…
CWSites
  • 1,428
  • 1
  • 19
  • 34
4
votes
1 answer

react-grid-layout How can I resize components on the grid?

I tried using a custom component with react-grid-layout. However, I could not get it working. When I put the component inside a div, I can resize that div, but the component itself is not resized with it. When I put the component inside the grid…
GiaglS
  • 63
  • 1
  • 1
  • 5
4
votes
1 answer

How to fill React Grid Layout item with material UI Card

I'm using React Grid layout to display a grid of widgets. Here is my grid component : class WidgetsGrid extends Component { render() { var layout = [ { i: "a", x: 0, y: 0, w: 3, h: 3, minW: 2, maxW: 4 } ]; var…
Putxe
  • 1,054
  • 1
  • 16
  • 23
4
votes
1 answer

Programatically generating grid items with react-grid-layout

I am developing an application using Meteor and ReactJS. I am using the react-grid-layout component to create a grid of items. The problem is that the position of each element needs to be specified manually. In my application, I am generating the…
user2840647
  • 1,236
  • 1
  • 13
  • 32
1
2 3
…
10 11